Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona Botón Añadir al carrito sticky para PrestaShop, por qué lo construimos así y la lógica detrás de las características anteriores.
Por qué un botón de compra sticky
En móvil, más del 60 por ciento de los visitantes pasan más allá del botón Añadir al carrito sin hacer clic. En escritorio, ocurre casi lo mismo en fichas de producto largas con descripción detallada, reseñas y productos relacionados. Una barra sticky que sigue al visitante recupera esa intención de compra justo cuando se desvanece. Los grandes marketplaces, empezando por Amazon, llevan años haciendo de esto una funcionalidad por defecto.
Una UX adaptada a cada formato de pantalla
En móvil (menos de 992 píxeles de ancho), una barra compacta se sitúa en la parte inferior de la pantalla, con respeto de las safe-area de iPhone con muesca. En escritorio, dos modos a elegir desde el back office: barra lateral flotante a la derecha que aparece con una animación discreta, o barra inferior centrada estilo móvil. Usted decide según su diseño y el tipo de ficha producto.
Selector inteligente de variante compacta
El selector compacto muestra todas las combinaciones disponibles con su precio y disponibilidad. Cuando el cliente cambia de variante en la barra sticky, el módulo sincroniza automáticamente la interfaz de variantes de la página principal (botones radio o listas desplegables), lo que dispara el motor de combinaciones nativo de PrestaShop: precio recalculado, stock comprobado, imagen actualizada, exactamente como si el cliente hubiera elegido la variante en la ficha producto.
Integración limpia, sin sorpresas
El módulo utiliza los hooks oficiales de PrestaShop y se mantiene al margen del DOM principal de su tema. El clic en Añadir al carrito desde la barra sticky dispara programáticamente el botón original del tema, lo que preserva el modal de confirmación, los eventos updateCart, las notificaciones de éxito y toda personalización ya presente en su tema u otros módulos.
Rendimiento cuidado
Sin framework, sin dependencias externas. El CSS pesa unos 7 KB y el JavaScript unos 12 KB, gzip incluido. Los assets se cargan únicamente en las páginas de producto, nunca en la home, el catálogo o el checkout. La visibilidad de la barra la gestiona IntersectionObserver nativo, mucho más eficiente que un listener de scroll continuo.
Configuración total desde el back office
Todo se configura desde la interfaz de PrestaShop, sin tocar código: activación global, visualización por dispositivo (móvil y o escritorio), modo escritorio (barra lateral flotante o barra inferior), desplazamiento superior para temas con cabecera fija, mostrar miniatura, selector de variante y selector de cantidad, y paleta de colores completa (fondo, botón, texto del botón, color de texto, color del precio).
Accesibilidad y buenas prácticas
La barra sticky cumple las recomendaciones ARIA: rol region, etiquetas explícitas para cada control, anuncios aria-live para los cambios de precio, foco visible en todos los botones, soporte completo de teclado. La media query prefers-reduced-motion desactiva las transiciones para los usuarios sensibles a las animaciones. Todos los textos son traducibles.
No hay valoraciones aún.