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 liker (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 dashboard analytics 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 automatiquement 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.

Configuration

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

• Enable swipe gallery — active ou désactive globalement le module.
• Mobile devices only — limite le bouton flottant aux écrans de moins de 992 px (activé par défaut). Désactivez-le pour proposer aussi le deck sur desktop.
• Maximum products per deck — nombre de cartes par session, de 5 à 100 (30 par défaut).
• Deck order — ordre des cartes : position catégorie, aléatoire (recommandé pour la découverte) ou nouveautés d’abord.
• Swipe up adds to cart — active le super-like : un swipe vers le haut ajoute le produit au panier.
• Hide already liked products — exclut des nouveaux decks les produits déjà likés par le visiteur.
• Show price on cards — affiche ou masque le prix sur les cartes (automatiquement masqué en mode catalogue).
• Launcher button position — position du bouton flottant : bas droite, bas gauche ou bas centre.

Utilisation côté boutique

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

• Swipe à droite (ou bouton cœur) — like : le produit est enregistré en wishlist.
• Swipe à gauche (ou bouton croix) — passe au produit suivant.
• Swipe vers le haut (ou bouton panier) — ajoute le produit au panier.
• Tap sur « Voir le produit » — ouvre la fiche produit.

Sur desktop, les flèches du clavier reproduisent les gestes (→ like, ← passer, ↑ panier) et la touche Échap ferme le deck. Une vibration haptique accompagne chaque swipe sur les appareils compatibles, et l’animation est désactivée si le visiteur a activé prefers-reduced-motion.

À la fin du deck, un écran récapitulatif liste les produits likés avec leur prix et un lien direct vers chaque fiche, plus un bouton pour relancer une session.

Wishlist, clients et invités

Chaque like est persisté dans la table native du module, qu’il provienne d’un client connecté ou d’un visiteur invité (rattaché à son id_guest). Une clé unique empêche les doublons.

Si le module officiel blockwishlist est installé et que le client est connecté, le produit est également ajouté à sa liste d’envies par défaut — créée automatiquement si elle n’existe pas encore. Aucune configuration n’est requise : le pont est silencieux et n’échoue jamais bruyamment.

Ajout panier par swipe

Le swipe vers le haut ajoute le produit côté serveur : le panier est créé si nécessaire, la quantité minimale du produit est respectée et le badge panier du thème est rafraîchi via l’événement standard prestashop.emit('updateCart'). Les produits non commandables (indisponibles à la commande) sont refusés proprement avec un message.

Analytics back-office

L’onglet Catalogue → Swipe Gallery présente le dashboard :

• Compteurs globaux : cartes vues, likes, skips, ajouts panier.
• Taux de like global : likes / (likes + skips).
• Top 20 des produits par likes, avec vues, skips, paniers et taux de like par produit.

Ces données constituent un signal merchandising direct : les produits au taux de like élevé méritent d’être mis en avant, ceux qui sont massivement skippés méritent une meilleure photo ou un repositionnement. Les statistiques d’un produit supprimé sont purgées automatiquement.

Multiboutique et multilingue

Les likes et statistiques sont enregistrés par boutique (id_shop). Les textes du deck (Like, Passer, Voir le produit, écran récapitulatif…) passent par le système de traduction natif de PrestaShop : traduisez-les dans 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 bien sur une page catégorie et que l’option mobile-only n’est pas active si vous testez sur desktop.
• Le deck est vide — la catégorie ne contient aucun produit actif visible, ou tous les produits sont exclus par l’option « Hide already liked products ».
• Le badge panier ne se met pas à jour — votre thème custom n’écoute peut-être pas l’événement updateCart ; adaptez l’écouteur dans votre thème ou contactez le support.
• Conflit d’affichage — l’overlay utilise un z-index de 1060 ; augmentez-le via CSS si un élément de votre thème passe au-dessus.

Changelog

• 1.0.0 (2026-07-16) — Version initiale : deck swipe plein écran, wishlist par swipe à droite avec pont blockwishlist, ajout panier par swipe vers le haut, support des invités, dashboard analytics, barre de progression stories, accessibilité, compatibilité PrestaShop 8 & 9 et multiboutique.