Patrones

Bloques compuestos que combinan varios componentes para resolver una necesidad de la tienda.

• Carga

  
  Page skeletonsUn skeleton por pantalla con el mismo layout que la página real, para mostrar mientras carga.

• Carrito

  
  Sidebar cartPanel lateral del carrito: productos con su cantidad, envío, subtotal, total y el botón para continuar.

• Checkout

  
  Header checkoutHeader simplificado del checkout: volver al paso anterior, logo y sello de compra segura.
• 
  Order summaryResumen de los datos del pedido en el checkout: email, cobranza, notas y facturación.
• 
  SteppersIndicador de pasos del checkout: datos personales, domicilio y entrega, y pago.

• Header y navegación

  
  Categories modalPanel de pantalla completa en mobile con las secciones y enlaces de una categoría.
• 
  Header desktopHeader de la tienda en pantallas grandes: aviso, contacto, buscador, cuenta, carrito y navegación por categorías.
• 
  Header mobileHeader de la tienda en pantallas chicas: aviso, menú, logo, buscador y carrito.
• 
  Main headerBarra principal del header en desktop: logo, buscador con sugerencias, cuenta y carrito.
• 
  Mega menuPanel de categorías del header en desktop, con las secciones y los enlaces de cada una.
• 
  Menu mobileContenido del menú lateral en mobile: cuenta, menú del perfil y lista de categorías.
• 
  Nav categoriesNavegación del header en desktop: enlaces principales, «Todas las categorías» con el mega menú y la cuenta.
• 
  Scroll to topSube la página al inicio cada vez que cambia la ruta. No dibuja nada.
• 
  Search modalBuscador de pantalla completa en mobile: búsquedas recientes y resultados mientras se escribe.
• 
  Sidebar categoriesLista de categorías en acordeón para el panel lateral de mobile.
• 
  Top barsLas dos franjas que van sobre el header: el aviso de cuotas y descuento, y la barra de contacto (solo desde 992 px).

• Inicio y contenido

  
  BannersBloques de banners promocionales de la home, de dos y de tres columnas.
• 
  Block servicesFranja con los beneficios de la tienda: soporte 24/7, devolución y envío gratuito.
• 
  Brands logosCarrusel con los logos de las marcas que vende la tienda.
• 
  Category sliderFila de una categoría: título, «Ver todos» y un carrusel de hasta diez productos.
• 
  FooterPie de página con el carrusel de marcas y las columnas de enlaces.
• 
  Hero sliderCarrusel de banners de la portada, con flechas, teclado y rueda del mouse.
• 
  Listing bannerBanner de las páginas de listado: Novedades, Ofertas y Más vendido.
• 
  Product carouselCarrusel horizontal de tarjetas de producto de celular, en dos tamaños.
• 
  Product gridGrilla de hasta cinco tarjetas de producto de las ofertas o de las novedades.
• 
  Support chatBotón flotante de ayuda que envía la consulta del cliente por WhatsApp.
• 
  SuscribeBloque de suscripción al newsletter con título, bajada y campo de email.

• Overlays

  
  Account modalsModales de la cuenta del cliente: agregar una tarjeta, editarla y ver una factura.
• 
  Alert floatingAviso flotante que confirma una acción sobre un producto: carrito, favorito agregado o favorito quitado.
• 
  Confirm modalDiálogo para confirmar una acción que no se puede deshacer, por ejemplo quitar un producto del carrito.
• 
  Discount methods modalModal con los medios de pago y sus descuentos o cuotas, con las tarjetas que acepta cada uno.
• 
  List pricesModal «Lista de Precios» del menú de la cuenta. Hoy es un marcador de posición.
• 
  Login modalModal de acceso a la cuenta, con los pasos «Ingresar» y «Crear cuenta».
• 
  Logout modalDiálogo para confirmar el cierre de sesión.
• 
  Quick viewPanel lateral con el resumen de un producto, para agregarlo al carrito sin salir del listado.

• Producto

  
  Product cardCard de producto en grillas y listados, con favorito, vista rápida y agregar al carrito.
• 
  Product card specDato técnico destacado bajo el título de la card de producto, por ejemplo «Ciclo: 2 horas».
• 
  Product detailBloque principal del detalle de producto: título, precio y cuotas, envío, cantidad, agregar al carrito y comprar ahora.
• 
  Product galleryGalería del detalle de producto en desktop: imagen principal con zoom y miniaturas.
• 
  Product gallery mobileGalería del detalle de producto en mobile: carrusel con paginación y el favorito sobre la imagen.
• 
  Product info tabsInformación del producto en pestañas: descripción, especificaciones, recursos, preguntas y garantía.
• 
  Product reviewsOpiniones del producto: puntaje promedio, distribución por estrellas y lista de reseñas.
• 
  Product specificationsSección de especificaciones técnicas del detalle de producto, en pestañas.
• 
  Products othersCarrusel «Otros productos» al final del detalle de producto.
• 
  Specifications blocksInformación del producto y bloques destacados con imagen y texto que alternan de lado.

• Profile

  
  Account addressVista «Mi Dirección»: direcciones de facturación, alta de una nueva y ubicación de envío.
• 
  Account notificationsPreferencias de notificaciones (interruptores y newsletter) y lista de avisos recibidos.
• 
  Account ordersVista «Mis Compras»: buscador, pestañas por estado y lista de pedidos.
• 
  Account paymentVista «Métodos de pago»: tarjetas guardadas, alta y edición, e historial de pedidos.
• 
  Account receiptsVista «Comprobantes»: historial de pedidos con referencia, monto y acceso a la factura.
• 
  Account securityVista «Seguridad»: verificación en dos pasos, cambio de contraseña e ingreso con Gmail.
• 
  Account wishlistVista «Favoritos»: los productos que el cliente marcó, con la opción de quitarlos.
• 
  Personal infoVista «Datos Personales»: nombre, email, teléfono, dirección y eliminación de la cuenta.
• 
  Profile menuMenú lateral de la cuenta del cliente, agrupado en Configuración, Compras y Pago.

• Search

  
  Filter listLista de casillas con la cantidad de resultados de cada opción, con «Ver más» para las que sobran.
• 
  Search filtersPanel lateral de filtros de los resultados: envío, filtros aplicados y grupos de opciones con su cantidad.
• 
  Search sortOrden de los resultados: menú desplegable para escritorio y selector nativo para celular.