DF Swipe Gallery — Navegación de productos por swipe

Presentación

DF Swipe Gallery convierte las páginas de categoría de su tienda PrestaShop en una baraja de tarjetas a pantalla completa al estilo Tinder. El visitante descubre los productos de uno en uno: swipe a la derecha para dar like (wishlist), a la izquierda para pasar, hacia arriba para añadir al carrito. Una barra de progreso estilo stories indica el avance y una pantalla final resume los favoritos de la sesión. Todas las interacciones alimentan un panel de analytics en el back office.

Instalación

1. En su back office, abra Módulos → Gestor de módulos → Subir un módulo.
2. Suba el archivo dfswipegallery.zip y haga clic en Instalar.
3. El módulo crea automáticamente sus dos tablas (df_swipegallery_like y df_swipegallery_stat), registra sus hooks y añade la pestaña Catálogo → Swipe Gallery.

No se necesita ninguna modificación del tema: el botón de lanzamiento y el overlay se inyectan mediante el hook displayFooterAfter, con independencia de su plantilla.

Configuración

Abra Módulos → DF Swipe Gallery → Configurar. Opciones disponibles:

• Enable swipe gallery — activa o desactiva el módulo globalmente.
• Mobile devices only — limita el botón flotante a pantallas de menos de 992 px (activado por defecto). Desactívelo para ofrecer la baraja también en escritorio.
• Maximum products per deck — tarjetas por sesión, de 5 a 100 (30 por defecto).
• Deck order — orden de las tarjetas: posición de categoría, aleatorio (recomendado para el descubrimiento) o novedades primero.
• Swipe up adds to cart — activa el super-like: un swipe hacia arriba añade el producto al carrito.
• Hide already liked products — excluye de las nuevas barajas los productos que el visitante ya ha likeado.
• Show price on cards — muestra u oculta el precio en las tarjetas (oculto automáticamente en modo catálogo).
• Launcher button position — posición del botón flotante: abajo derecha, abajo izquierda o abajo centro.

Uso en la tienda

En cualquier página de categoría aparece un botón flotante «Swipe mode». Al tocarlo, la baraja se abre a pantalla completa:

• Swipe a la derecha (o botón corazón) — like: el producto se guarda en la wishlist.
• Swipe a la izquierda (o botón cruz) — pasa al producto siguiente.
• Swipe hacia arriba (o botón carrito) — añade el producto al carrito.
• Toque en «Ver producto» — abre la ficha del producto.

En escritorio, las flechas del teclado reproducen los gestos (→ like, ← pasar, ↑ carrito) y la tecla Escape cierra la baraja. Una vibración háptica acompaña cada swipe en los dispositivos compatibles, y la animación se desactiva si el visitante tiene prefers-reduced-motion activado.

Al final de la baraja, una pantalla resumen lista los productos likeados con su precio y un enlace directo a cada ficha, más un botón para reiniciar la sesión.

Wishlist, clientes e invitados

Cada like se guarda en la tabla propia del módulo, ya provenga de un cliente conectado o de un visitante invitado (vinculado a su id_guest). Una clave única evita los duplicados.

Si el módulo oficial blockwishlist está instalado y el cliente está conectado, el producto se añade también a su lista de deseos por defecto — creada automáticamente si aún no existe. No se requiere configuración: el puente es silencioso y nunca falla de forma ruidosa.

Añadir al carrito con swipe

El swipe hacia arriba añade el producto en el servidor: el carrito se crea si es necesario, se respeta la cantidad mínima del producto y el contador del carrito del tema se actualiza mediante el evento estándar prestashop.emit('updateCart'). Los productos no disponibles para pedido se rechazan limpiamente con un mensaje.

Analytics en el back office

La pestaña Catálogo → Swipe Gallery muestra el panel:

• Contadores globales: tarjetas vistas, likes, skips, añadidos al carrito.
• Tasa de likes global: likes / (likes + skips).
• Top 20 de productos por likes, con vistas, skips, carritos y tasa de likes por producto.

Estos datos son una señal de merchandising directa: los productos con alta tasa de likes merecen más visibilidad, los muy skipeados quizá necesiten una mejor foto o un reposicionamiento. Las estadísticas de un producto eliminado se purgan automáticamente.

Multitienda y multilingüe

Los likes y las estadísticas se registran por tienda (id_shop). Los textos de la baraja (Like, Pasar, Ver producto, pantalla resumen…) pasan por el sistema de traducción nativo de PrestaShop: tradúzcalos en Internacional → Traducciones → Traducciones de los módulos instalados.

Solución de problemas

• El botón no aparece — compruebe que el módulo está activado, que está en una página de categoría y que la opción solo-móvil no está activa si prueba en escritorio.
• La baraja está vacía — la categoría no contiene ningún producto activo visible, o todos los productos quedan excluidos por la opción «Hide already liked products».
• El contador del carrito no se actualiza — puede que su tema personalizado no escuche el evento updateCart; adapte el listener en su tema o contacte con el soporte.
• Conflicto de visualización — el overlay usa un z-index de 1060; auméntelo vía CSS si un elemento de su tema queda por encima.

Changelog

• 1.0.0 (2026-07-16) — Versión inicial: baraja swipe a pantalla completa, wishlist con swipe a la derecha y puente blockwishlist, añadido al carrito con swipe hacia arriba, soporte de invitados, panel de analytics, barra de progreso estilo stories, accesibilidad, compatibilidad con PrestaShop 8 y 9 y multitienda.