DF Swipe Gallery : navigation produits par swipe

Présentation

DF Swipe Gallery transforme les pages catégorie de votre boutique PrestaShop en deck de cartes plein écran façon Tinder. Le visiteur découvre les produits un par un : swipe à droite pour aimer (wishlist), swipe à gauche pour passer, swipe vers le haut pour ajouter au panier. Une barre de progression style stories indique l’avancement et un écran final récapitule les coups de cœur de la session. Toutes les interactions alimentent un tableau de bord dans le back-office.

Installation

1. Dans votre back-office, ouvrez Modules > Gestionnaire de modules > Installer un module.
2. Envoyez le fichier dfswipegallery.zip puis cliquez sur Installer.
3. Le module crée ses deux tables (df_swipegallery_like et df_swipegallery_stat), enregistre ses hooks et ajoute l’onglet Catalogue > Swipe Gallery.

Aucune modification de thème n’est nécessaire : le bouton de lancement et l’overlay sont injectés via le hook displayFooterAfter, indépendamment de votre template.

Mise à jour depuis la 1.0.0

Envoyez le ZIP 1.1.0 par-dessus l’ancien module. Le script de mise à jour ajoute la colonne des ouvertures de fiche, enregistre les nouveaux hooks, crée les nouveaux réglages avec leurs valeurs par défaut et conserve vos likes et statistiques. Videz ensuite le cache de PrestaShop.

Configuration

Ouvrez Modules > DF Swipe Gallery > Configurer. Les options disponibles :

• Activer la swipe gallery : active ou désactive globalement le module.
• Mobiles uniquement : limite le bouton flottant aux écrans de moins de 992 px (activé par défaut). Désactivez-le pour proposer aussi le deck sur ordinateur.
• Nombre maximum de produits par deck : de 5 à 100 (30 par défaut).
• Ordre du deck : position dans la catégorie, aléatoire (recommandé pour la découverte) ou nouveautés d’abord.
• Le swipe vers le haut ajoute au panier : active le super-like.
• Laisser le visiteur choisir la déclinaison : pour les produits à déclinaisons, le swipe vers le haut ouvre un panneau de choix (taille, couleur, etc.) avant l’ajout au panier. Désactivée, la déclinaison par défaut est ajoutée directement (nouveau en 1.2.0, activé par défaut).
• Masquer les produits déjà aimés : exclut des nouveaux decks les produits que le visiteur a déjà aimés.
• Masquer les produits en rupture : retire du deck les produits non commandables faute de stock (nouveau en 1.1.0).
• Afficher le prix sur les cartes : affiche le prix, barré avec le prix d’origine quand une promotion s’applique. Masqué automatiquement en mode catalogue.
• Position du bouton de lancement : en bas à droite, à gauche ou au centre.
• Couleur d’accent : couleur du bouton de lancement et du bouton Recommencer (nouveau en 1.1.0). La couleur du texte s’adapte automatiquement pour rester lisible.

Utilisation côté boutique

Sur toute page catégorie, un bouton flottant « Mode swipe » apparaît. Au toucher, le deck s’ouvre en plein écran :

• Swipe à droite (ou bouton cœur) : le produit est aimé et enregistré en wishlist.
• Swipe à gauche (ou bouton croix) : passe au produit suivant.
• Swipe vers le haut (ou bouton panier) : ajoute le produit au panier ; pour un produit à déclinaisons, un panneau s’ouvre d’abord pour choisir la déclinaison. Le bouton est grisé sur les produits indisponibles.
• « Voir le produit » : ouvre la fiche produit.

Un geste court mais rapide (flick) suffit à valider un swipe. Les cartes affichent les pastilles « Déjà aimé » et « Indisponible » quand c’est pertinent. Sur ordinateur, les flèches du clavier reproduisent les gestes (droite : aimer, gauche : passer, haut : panier) et la touche Échap ferme le deck. Sur mobile, le bouton retour du téléphone ferme le deck au lieu de quitter la page.

À la fin du deck, un écran récapitulatif liste les produits aimés avec leur prix et un lien vers chaque fiche. Le bouton Recommencer recharge un nouveau deck sans fermer l’overlay.

Accessibilité : le focus est placé dans le deck à l’ouverture et rendu au bouton à la fermeture, la tabulation reste dans le deck, le produit en cours est annoncé aux lecteurs d’écran, et les animations sont coupées si le visiteur a activé prefers-reduced-motion.

Wishlist, clients et invités

Chaque like est enregistré dans la table du module, qu’il provienne d’un client connecté ou d’un visiteur invité (rattaché à son identifiant visiteur PrestaShop). Une clé unique empêche les doublons, y compris quand un même client utilise plusieurs appareils.

Si le module officiel blockwishlist est installé et que le client est connecté, le produit est ajouté à sa liste d’envies par défaut, créée automatiquement si besoin, avec sa déclinaison par défaut. Aucune configuration n’est requise.

Depuis la 1.1.0, quand un invité se connecte ou crée son compte, ses likes sont transférés automatiquement au compte client, puis ajoutés à sa liste d’envies blockwishlist. Les hooks actionAuthentication et actionCustomerAccountAdd s’en chargent ; une erreur à cette étape ne bloque jamais la connexion.

Ajout au panier par swipe

Le swipe vers le haut ajoute le produit côté serveur avec les mêmes règles que le bouton natif : déclinaison choisie par le visiteur (ou déclinaison par défaut si le panneau est désactivé), quantité minimale respectée, contrôle du stock et des droits d’accès. Le panier est créé si nécessaire et conservé dans la session du visiteur.

Le badge panier du thème est ensuite rafraîchi via l’événement standard prestashop.emit('updateCart'), sans ouvrir la fenêtre « produit ajouté » du thème. Un message confirme l’ajout ; si le produit ne peut pas être ajouté, le visiteur voit la raison.

Choix de la déclinaison

Pour un produit à déclinaisons, le swipe vers le haut, le bouton panier ou la flèche haut ouvrent un panneau en bas de l’écran. Les couleurs s’affichent en pastilles (ou avec leur texture si elle est définie dans Catalogue > Attributs), les autres attributs en boutons, et une longue liste de valeurs de type liste déroulante reste une liste déroulante. La déclinaison par défaut est présélectionnée.

À chaque choix, le panneau met à jour l’image, le prix (barré en cas de promotion) et le stock de la déclinaison. Une valeur en rupture est grisée ; une valeur qui n’existe pas avec les autres choix est barrée, et la sélectionner bascule vers la déclinaison existante la plus proche, en privilégiant celle en stock. Le bouton d’ajout reste désactivé tant que la déclinaison n’est pas commandable.

Échap, la croix ou le bouton retour du téléphone ferment le panneau sans quitter le deck. Les données sont chargées à la première ouverture puis gardées en mémoire pendant la session. Côté serveur, la déclinaison reçue est vérifiée (elle doit appartenir au produit et être vendue dans la boutique) et le stock est contrôlé, panier existant compris.

Statistiques back-office

L’onglet Catalogue > Swipe Gallery présente :

• Les compteurs : cartes vues, j’aime, passés, ajouts au panier, ouvertures de fiche produit.
• Le taux de j’aime (j’aime / (j’aime + passés)), le taux d’ajout au panier et le taux d’ouverture de fiche par carte vue.
• Les 20 produits les plus aimés, avec un lien vers leur fiche en back-office.
• Les produits les plus passés (au moins 5 swipes), triés par taux de passage : de bons candidats pour une meilleure photo principale ou un prix revu.
• L’export CSV de toutes les statistiques et un bouton de remise à zéro par boutique (les likes des visiteurs sont conservés).

Les statistiques d’un produit supprimé sont purgées automatiquement. Aucune donnée n’est envoyée à un service tiers.

RGPD

Le module se déclare auprès du module officiel psgdpr : les likes liés à un compte client apparaissent dans l’export des données personnelles et sont supprimés lors d’une demande d’effacement. Ils sont aussi effacés quand un client est supprimé du back-office. Les statistiques sont agrégées par produit et ne contiennent aucune donnée personnelle.

Multiboutique et traductions

Les likes et statistiques sont enregistrés par boutique. Le module est livré traduit en 8 langues (anglais en langue source, plus FR, ES, DE, IT, NL, PL, PT). Pour ajuster un libellé, passez par International > Traductions > Traductions des modules installés.

Dépannage

• Le bouton n’apparaît pas : vérifiez que le module est activé, que vous êtes sur une page catégorie et que l’option « Mobiles uniquement » n’est pas active si vous testez sur ordinateur.
• Le deck est vide : la catégorie ne contient aucun produit actif visible, la catégorie n’est pas accessible au groupe du visiteur, ou tous les produits sont exclus par les options « Masquer les produits déjà aimés » ou « Masquer les produits en rupture ».
• Le badge panier ne se met pas à jour : votre thème n’écoute peut-être pas l’événement updateCart ; le produit est bien dans le panier, adaptez l’écouteur du thème ou contactez le support.
• Un élément du thème passe au-dessus du deck : l’overlay utilise un z-index de 100000 ; augmentez-le via CSS si un bandeau cookies ou un chat le recouvre.
• Après la mise à jour, l’ancien comportement persiste : videz le cache de PrestaShop et celui du navigateur ; le script de mise à jour réinitialise aussi l’OPcache quand il est disponible.

Changelog

• 1.2.0 (2026-10-13) : choix de la déclinaison avant l’ajout au panier (pastilles de couleur, tailles, prix, image et stock par déclinaison, déclinaisons inexistantes barrées et bascule automatique vers la plus proche) ; option « Laisser le visiteur choisir la déclinaison » ; message précis quand une déclinaison est en rupture ; affichage indépendant du box-sizing du thème.
• 1.1.0 (2026-10-13) : panier créé par swipe vers le haut désormais conservé ; déclinaison par défaut au panier et en wishlist ; plus de fenêtre « produit ajouté » derrière le deck ; transfert automatique des likes invités au compte client ; statistiques fiabilisées (cartes réellement vues, ouvertures de fiche, produits les plus passés, export CSV, remise à zéro) ; options « Masquer les produits en rupture » et « Couleur d’accent » ; prix barré ; bouton retour mobile, geste de flick, gestion du focus ; RGPD via psgdpr ; traductions en 8 langues.
• 1.0.0 (2026-07-16) : version initiale. Deck swipe plein écran, wishlist par swipe à droite avec pont blockwishlist, ajout au panier par swipe vers le haut, support des invités, tableau de bord, barre de progression stories, compatibilité PrestaShop 8 et 9, multiboutique.