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 me gusta (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 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 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 inicio y el overlay se inyectan mediante el hook displayFooterAfter, con independencia de su plantilla.

Actualización desde la 1.0.0

Suba el ZIP 1.1.0 sobre el módulo existente. El script de actualización añade la columna de aperturas de ficha, registra los nuevos hooks, crea los nuevos ajustes con sus valores por defecto y conserva sus likes y estadísticas. Después, vacíe la caché de PrestaShop.

Configuración

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

• Activar la swipe gallery: activa o desactiva el módulo globalmente.
• Solo dispositivos móviles: 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.
• Número máximo de productos por baraja: de 5 a 100 (30 por defecto).
• Orden de la baraja: posición en la categoría, aleatorio (recomendado para descubrir) o novedades primero.
• El swipe hacia arriba añade al carrito: activa el super-like.
• Dejar que el visitante elija la combinación: en los productos con combinaciones, el swipe hacia arriba abre un panel para elegir talla, color, etc. antes de añadir al carrito. Si está desactivado, se añade directamente la combinación por defecto (nuevo en 1.2.0, activado por defecto).
• Ocultar los productos que ya gustan: excluye de las nuevas barajas los productos que el visitante ya marcó con me gusta.
• Ocultar los productos sin stock: deja fuera los productos que no se pueden pedir por falta de stock (nuevo en 1.1.0).
• Mostrar el precio en las tarjetas: muestra el precio, con el precio original tachado cuando hay una oferta. Oculto automáticamente en modo catálogo.
• Posición del botón de inicio: abajo a la derecha, a la izquierda o en el centro.
• Color de acento: color del botón de inicio y del botón Volver a empezar (nuevo en 1.1.0). El color del texto se adapta automáticamente para seguir siendo legible.

Uso en la tienda

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

• Swipe a la derecha (o botón corazón): el producto recibe un me gusta y 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; en un producto con combinaciones, primero se abre un panel para elegir la combinación. El botón aparece atenuado en los productos no disponibles.
• «Ver el producto»: abre la ficha del producto.

Un gesto corto pero rápido basta para validar un swipe. Las tarjetas muestran las etiquetas «Ya te gusta» y «No disponible» cuando procede. En escritorio, las flechas del teclado reproducen los gestos (derecha: me gusta, izquierda: pasar, arriba: carrito) y la tecla Escape cierra la baraja. En el móvil, el botón atrás del teléfono cierra la baraja en lugar de salir de la página.

Al final de la baraja, una pantalla resumen lista los productos que gustaron con su precio y un enlace a cada ficha. El botón Volver a empezar carga una nueva baraja sin cerrar el overlay.

Accesibilidad: el foco entra en la baraja al abrirla y vuelve al botón al cerrarla, la tabulación se queda dentro de la baraja, el producto actual se anuncia a los lectores de pantalla y las animaciones se desactivan si el visitante tiene prefers-reduced-motion activado.

Wishlist, clientes e invitados

Cada me gusta se guarda en la tabla del módulo, ya provenga de un cliente conectado o de un visitante invitado (vinculado a su identificador de visitante de PrestaShop). Una clave única evita los duplicados, también cuando un mismo cliente usa varios dispositivos.

Si el módulo oficial blockwishlist está instalado y el cliente ha iniciado sesión, el producto se añade a su lista de deseos por defecto, creada automáticamente si hace falta, con su combinación por defecto. No se requiere configuración.

Desde la 1.1.0, cuando un invitado inicia sesión o crea su cuenta, sus me gusta se transfieren automáticamente a la cuenta de cliente y después a su lista de deseos blockwishlist. Los hooks actionAuthentication y actionCustomerAccountAdd se encargan de ello; un error en este paso nunca bloquea el inicio de sesión.

Añadir al carrito con swipe

El swipe hacia arriba añade el producto en el servidor con las mismas reglas que el botón nativo: combinación elegida por el visitante (o combinación por defecto si el panel está desactivado), cantidad mínima respetada, control de stock y de derechos de acceso. El carrito se crea si es necesario y se conserva en la sesión del visitante.

A continuación, el contador del carrito del tema se actualiza mediante el evento estándar prestashop.emit('updateCart'), sin abrir la ventana «producto añadido» del tema. Un mensaje confirma el añadido; si el producto no se puede añadir, el visitante ve el motivo.

Elección de la combinación

En un producto con combinaciones, el swipe hacia arriba, el botón carrito o la flecha arriba abren un panel en la parte inferior de la pantalla. Los colores se muestran como muestras (o con su textura si está definida en Catálogo > Atributos), los demás atributos como botones, y una lista larga de tipo desplegable sigue siendo un desplegable. La combinación por defecto aparece preseleccionada.

Con cada elección, el panel actualiza la imagen, el precio (tachado si hay oferta) y el stock de la combinación. Un valor agotado aparece atenuado; un valor que no existe con las demás elecciones aparece tachado, y al seleccionarlo se pasa a la combinación existente más cercana, dando prioridad a la que tiene stock. El botón de añadir permanece desactivado mientras la combinación no se pueda pedir.

Escape, la cruz o el botón atrás del teléfono cierran el panel sin salir de la baraja. Los datos se cargan en la primera apertura y se conservan en memoria durante la sesión. En el servidor, se verifica la combinación recibida (debe pertenecer al producto y venderse en la tienda) y se controla el stock, incluido lo que ya está en el carrito.

Estadísticas en el back office

La pestaña Catálogo > Swipe Gallery muestra:

• Los contadores: tarjetas vistas, me gusta, descartes, añadidos al carrito, aperturas de ficha de producto.
• La tasa de me gusta (me gusta / (me gusta + descartes)), la tasa de añadido al carrito y la tasa de apertura de ficha por tarjeta vista.
• Los 20 productos con más me gusta, con enlace a su ficha en el back office.
• Los productos más descartados (al menos 5 swipes), ordenados por tasa de descarte: buenos candidatos para una mejor foto principal o un precio revisado.
• La exportación CSV de todas las estadísticas y un botón de restablecimiento por tienda (los me gusta de los visitantes se conservan).

Las estadísticas de un producto eliminado se purgan automáticamente. No se envía ningún dato a servicios de terceros.

RGPD

El módulo se declara ante el módulo oficial psgdpr: los me gusta vinculados a una cuenta de cliente aparecen en la exportación de datos personales y se eliminan con una solicitud de supresión. También se borran cuando se elimina un cliente desde el back office. Las estadísticas están agregadas por producto y no contienen datos personales.

Multitienda y traducciones

Los me gusta y las estadísticas se registran por tienda. El módulo se entrega traducido a 8 idiomas (inglés como idioma fuente, más FR, ES, DE, IT, NL, PL, PT). Para ajustar un texto, use 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 «Solo dispositivos móviles» está desactivado si prueba en escritorio.
• La baraja está vacía: la categoría no contiene ningún producto activo visible, no es accesible para el grupo del visitante, o todos los productos quedan excluidos por «Ocultar los productos que ya gustan» u «Ocultar los productos sin stock».
• El contador del carrito no se actualiza: puede que su tema no escuche el evento updateCart; el producto sí está en el carrito, adapte el listener del tema o contacte con el soporte.
• Un elemento del tema queda por encima de la baraja: el overlay usa un z-index de 100000; auméntelo vía CSS si un banner de cookies o un chat lo cubre.
• Tras la actualización persiste el comportamiento anterior: vacíe la caché de PrestaShop y la del navegador; el script de actualización también reinicia OPcache cuando está disponible.

Changelog

• 1.2.0 (2026-10-13): elección de la combinación antes de añadir al carrito (muestras de color, tallas, precio, imagen y stock por combinación, combinaciones inexistentes tachadas y cambio automático a la más cercana); opción «Dejar que el visitante elija la combinación»; mensaje preciso cuando una combinación está agotada; visualización independiente del box-sizing del tema.
• 1.1.0 (2026-10-13): el carrito creado con un swipe hacia arriba ahora se conserva; combinación por defecto en el carrito y la wishlist; ya no aparece la ventana «producto añadido» detrás de la baraja; transferencia automática de los me gusta de invitados a la cuenta de cliente; estadísticas fiables (tarjetas realmente vistas, aperturas de ficha, productos más descartados, exportación CSV, restablecimiento); opciones «Ocultar los productos sin stock» y «Color de acento»; precio tachado; botón atrás del móvil, gesto rápido, gestión del foco; RGPD mediante psgdpr; traducciones a 8 idiomas.
• 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, barra de progreso estilo stories, compatibilidad con PrestaShop 8 y 9, multitienda.