Sticky Add to Cart para PrestaShop — Guía completa

Presentación

DataFirefly Sticky Add to Cart muestra una barra «Añadir al carrito» persistente en las páginas de producto de su tienda PrestaShop 8 o 9. En móvil, una barra compacta se fija en la parte inferior de la pantalla. En escritorio, una barra lateral flotante se desliza desde la derecha (o, si lo prefiere, una barra inferior idéntica a la del móvil). La barra incluye un selector compacto de variante, un selector de cantidad y el precio actualizado en tiempo real.

La adición al carrito se realiza mediante una petición AJAX directa al controlador de carrito de PrestaShop: el módulo nunca manipula el formulario ni el botón nativo de su tema, lo que garantiza una convivencia sin conflictos.

Instalación

1. En su back office de PrestaShop, abra Módulos > Gestor de módulos.
2. Haga clic en Subir un módulo y seleccione el archivo dfstickyaddtocart.zip.
3. Una vez instalado el módulo, haga clic en Configurar.
4. Vacíe la caché de PrestaShop: Parámetros avanzados > Rendimiento > Vaciar caché.

Configuración

Todos los ajustes se encuentran en Módulos > Gestor de módulos > DataFirefly Sticky Add to Cart > Configurar.

Visualización

• Activar el módulo — interruptor global.
• Mostrar en móvil — activa la barra inferior en pantallas de menos de 992 px.
• Mostrar en escritorio — activa la visualización en pantallas de 992 px o más.
• Visualización escritorio — dos modos: Barra lateral flotante (derecha), una tarjeta de 320 px que se desliza desde el borde derecho, o Barra inferior, idéntica a la versión móvil pero centrada a 1280 px.
• Desplazamiento superior escritorio (px) — distancia entre la parte superior de la ventana y la barra lateral flotante. Aumente este valor si su tema tiene una cabecera fija (90 px por defecto).

Contenido de la barra

• Mostrar imagen del producto — miniatura de la imagen de portada.
• Mostrar selector de variante — lista desplegable compacta de las combinaciones (oculta automáticamente si el producto no tiene combinaciones).
• Mostrar selector de cantidad — botones menos / más (visible en escritorio; en móvil la cantidad se mantiene en 1 para preservar la compacidad).
• Ocultar cuando el botón principal es visible — la barra solo aparece cuando el botón «Añadir al carrito» original sale del viewport (recomendado). Desactívelo para una barra siempre visible.

Colores

• Color de fondo — fondo de la barra (blanco por defecto).
• Color del botón — botón de añadir al carrito (teal #2fb5d2 por defecto).
• Color del texto del botón — etiqueta del botón.
• Color del texto — nombre del producto y etiquetas.
• Color del precio — opcional; si está vacío, se usa el color del botón.

Funcionamiento

Detección de visibilidad

El módulo observa el bloque «Añadir al carrito» original con la API IntersectionObserver del navegador. En cuanto este bloque sale del viewport (el usuario ha hecho scroll), la barra sticky aparece con una animación de deslizamiento. En cuanto vuelve a la vista, la barra desaparece. Este mecanismo es nativo del navegador y no añade ningún coste de rendimiento al scroll.

Selector de variante

Para los productos con combinaciones, el selector compacto muestra cada variante con su precio y disponibilidad (las variantes agotadas están desactivadas). La selección es local a la barra sticky: no modifica la interfaz de variantes de la página principal. Cuando el cliente cambia de variante desde la página principal, la barra sticky se sincroniza automáticamente mediante el evento updatedProduct de PrestaShop.

Añadir al carrito

El clic en el botón sticky envía una petición AJAX POST directamente al controlador de carrito de PrestaShop (el mismo endpoint que usa el tema), con la variante y la cantidad elegidas en la barra. En caso de éxito, el módulo emite el evento updateCart: el contador del carrito en la cabecera y la vista previa del carrito de su tema se actualizan normalmente, y el botón sticky muestra una marca de confirmación.

Visualización móvil

En móvil, la barra se adapta automáticamente:

• Producto sin variantes — una sola fila: miniatura, nombre, precio y botón. Por debajo de 600 px la etiqueta del botón da paso al icono del carrito; por debajo de 380 px se oculta la miniatura.
• Producto con variantes — dos filas: miniatura, nombre, precio y botón en la primera; selector de variante a ancho completo en la segunda.

La barra respeta la zona safe-area-inset-bottom de los iPhone con muesca y la preferencia prefers-reduced-motion de los usuarios sensibles a las animaciones.

Compatibilidad de temas

El módulo utiliza los selectores CSS estándar del tema Classic y sus derivados: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. La gran mayoría de los temas del mercado siguen estas convenciones.

Si su tema utiliza clases diferentes, las dos funciones a adaptar están al principio del archivo views/js/dfstickyaddtocart.js: getMainBtn() (selector del botón nativo) y getMainForm() (selector del formulario de producto). Son los dos únicos puntos de contacto con su tema.

Solución de problemas

La barra no aparece

1. Compruebe que el módulo está activado en su configuración y que la visualización está activa para el dispositivo probado (móvil / escritorio).
2. Vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento) y recargue la página con Ctrl+Mayús+R.
3. Si la opción «Ocultar cuando el botón principal es visible» está activa, la barra solo aparece tras hacer scroll más allá del botón original — es el comportamiento esperado.
4. Compruebe en la consola del navegador que ningún error JavaScript de otro módulo bloquea la ejecución de la página.

La adición al carrito no funciona

1. Abra la consola del navegador: el módulo registra sus errores con el prefijo [dfsticky].
2. Compruebe en la pestaña Red la petición POST al controlador de carrito: el código HTTP y el cuerpo de la respuesta indican la causa exacta (agotado, cantidad mínima, etc.).
3. El módulo tolera los avisos PHP en entornos de desarrollo (extrae el JSON incluso si hay avisos antes), pero se recomienda un entorno de producción limpio.

La barra lateral se superpone a la cabecera del tema

Aumente el valor Desplazamiento superior escritorio (px) en la configuración hasta que la barra lateral quede debajo de su cabecera fija.

FAQ técnica

¿Ralentiza el módulo las páginas?

No. Los assets (unos 7 KB de CSS y 12 KB de JavaScript) solo se cargan en el controlador product. Sin bibliotecas externas, sin listener de scroll: la visibilidad la gestiona IntersectionObserver.

¿Es compatible con multitienda?

Sí. Todos los valores se almacenan mediante la clase Configuration de PrestaShop con el contexto multitienda nativo: cada tienda puede tener sus propios colores y ajustes.

¿Qué hooks utiliza?

actionFrontControllerSetMedia (registro de assets), displayFooterProduct (renderizado del markup) y displayHeader (micro-CSS crítico anti-parpadeo).

¿Son traducibles los textos?

Sí. Todas las cadenas pasan por el sistema de traducción de PrestaShop. El módulo se entrega en francés, inglés, español y alemán; añada más idiomas en Internacional > Traducciones.

Historial de versiones

1.0.3

• Análisis tolerante de las respuestas del controlador de carrito: el JSON se extrae correctamente incluso cuando hay avisos PHP antes (entornos de desarrollo).
• Cuerpo de petición en formato URL-encoded, idéntico a la serialización nativa del tema, para máxima compatibilidad.
• Eliminación definitiva de cualquier activación programática del botón nativo: ambos botones son ahora totalmente independientes.

1.0.2

• Eliminado el renderizado del modal de confirmación devuelto por el controlador de carrito, que podía dejar una capa invisible bloqueando los clics en algunas páginas. La confirmación pasa por el evento updateCart y la marca del botón sticky.
• Limpieza defensiva de modales huérfanos al cargar la página.

1.0.1

• Cambio a adición al carrito por petición AJAX directa: el módulo ya no modifica el formulario de producto y ya no depende del estado del DOM del tema.
• Referencias DOM resueltas al vuelo para sobrevivir al reemplazo del formulario por el motor de combinaciones.
• Reinicio de seguridad del indicador de carga.

1.0.0

• Versión inicial: barra sticky móvil y escritorio, selector compacto de variante, selector de cantidad, personalización de colores, accesibilidad ARIA, multitienda, FR/EN/ES/DE.