@webexport/webx-ui-lib NPM

WebExport UI Lib

Encabezado

El encabezado de la libreria de componentes va a ser utilizado por todas las aplicaciones, debiendo este permitir personalizar el siguiente contenido:

Logo: Imagen superior izquierda.
Buscador: Lleva a la pantalla de resultado de busqueda
Enlaces superiores (A la derecha del buscador)
Enlaces inferiores (abajo del buscador)
Categorias: Menu lateral izquierdo, muestra el listado dinámico de categorias
Botones inferiores de categoria (cyber monday, loreal, etc): Links dinámicos
Icono de carrito: Indicará si hay productos en el carrito de compras. Tiene un efecto animado al momento de agregar un producto al carrito. Al hacerle click se puede indicar a donde va a direccionar (quién implemente este botón debería poner el path a la vista del checkout)

Componentes identificados

<Header logo="" primaryLinks={[]} secondaryLinks={[]} bottomLinks={[]} categories={[]} />: Encabezado de la aplicación. Muestra logo e integración de <SideBar />, <Browser />, <PrimaryLinks />, <SecondaryLinks />, <BottomLinks />, <SideBar links={[]} /> y <CartButton />
<Browser />: Buscador. Input de formulario y botón.
<PrimaryLinks />: Listado de links
<SecondaryLinks />: Listado de links
<BottomLinks />: Listado de links
<SideBar links={[]} />: Menu lateral con el listado de categorias con links.
<CartButton />: Botón del carrito. Muestra la cantidad de elementos en el carrito. Tiene un efecto animado cuando se agrega un producto. Al hacerle click redirecciona al checkout.

Principal

El contenido principal de la página muestra arriba un slider que va rotando imágenes. Esas imágenes tienen asociado un link. Abajo se muestran tarjetas dinámicas, con un icono, un titulo y una descripción. Detalle se abre en modal. Abajo, las tarjetas con los productos. Se muestran ofertas en distintas partes de la pantalla.

Componentes identificados

<Slider content={[]} />: Muestra imagenes y links. Recibe un array de objetos, cada objeto contiene link e imagen.
<Modal>{children}</Modal>: Ventana modal para mostrar información.
<ProductCard />: Tarjeta de producto. Contiene:
- Titulo
- Imagen
- Botón favorito
- Descripción
- Precio / Precio anterior
- Botón de compra
- Selector de cantidad
- Aviso descuento
- Aviso stock
- Aviso oferta
- Comparar
<Offers position={1} items={[]} />: Muestra las ofertas. Recibe la posición donde debe mostrarse, y un array de objetos donde cada elemento contiene una imagen y un link.

Pié de página

Muestra el logo de la aplicación, descripción, copyright, botones de contacto, columnas dinámicas

Componentes identificados

<Footer logo="" description="" copyright="" contact={[{icon: 'facebook', link: 'https://www.facebook.com/my-profile'}]} columns={[ { title: 'Sobre nosotros', items: [{ title: 'Farmavitus', link: 'https://', }] } ]} />

Resultado de búsqueda

El detalle de cuando se realiza una búsqueda o se llega usando los links de filtro. Muestra el listado de productos segun la busqueda o filtro aplicado, y un filtro a la izquieda.

Componentes identificados

<ProductsFilter />: Permite filtrar el listado de productos. El contenido del filtro va a depender del tipo de producto que se esté mostrando por filtro/búsqueda. Pueden ser excluyentes o incluyentes.
<OrderBy />: Permite indicar el orden en el que deben mostrarse los productos en el listado de filtro/búsqueda
<Breadcrumb items={[]} />: Recibe un array de objetos con un titulo y un link
<ProductsCompare products={[]} />: Permite comprar 4 productos. Es una vista previa de 4 columnas máximo donde aparece un pequeño detalle de cada producto. Tiene un botón que debería llevar a una pantalla con el detalle.

Detalle del producto

Muestra el detalle del producto.

Componentes identificados

<ProductDetail />, detalle del producto, recibe:
- Marca
- Titulo
- Imagen
- Precio / Precio anterior
- Cantidad
- Agregar
- Comprar ahora
, componente para mostrar más detalles y Descripción. Recibe contenido dinámico.