Sticky Add to Cart pour PrestaShop — Guide complet

Présentation

DataFirefly Sticky Add to Cart affiche une barre « Ajouter au panier » persistante sur les pages produit de votre boutique PrestaShop 8 ou 9. Sur mobile, une barre compacte se fixe en bas de l’écran. Sur desktop, une sidebar flottante glisse depuis la droite (ou, au choix, une barre en bas identique au mobile). La barre inclut un mini-sélecteur de variante, un sélecteur de quantité et le prix mis à jour en temps réel.

L’ajout au panier s’effectue par une requête AJAX directe vers le contrôleur panier de PrestaShop : le module ne manipule jamais le formulaire ni le bouton natif de votre thème, ce qui garantit une coexistence sans conflit.

Installation

1. Dans votre back-office PrestaShop, ouvrez Modules > Gestionnaire de modules.
2. Cliquez sur Installer un module puis sélectionnez le fichier dfstickyaddtocart.zip.
3. Une fois le module installé, cliquez sur Configurer.
4. Videz le cache PrestaShop : Paramètres avancés > Performances > Vider le cache.

Configuration

Tous les réglages se trouvent dans Modules > Gestionnaire de modules > DataFirefly Sticky Add to Cart > Configurer.

Affichage

• Activer le module — interrupteur global.
• Afficher sur mobile — active la barre en bas sur les écrans de moins de 992 px.
• Afficher sur desktop — active l’affichage sur les écrans de 992 px et plus.
• Affichage desktop — deux modes : Sidebar flottante (à droite), une carte de 320 px qui glisse depuis le bord droit, ou Barre en bas, identique au rendu mobile mais centrée sur 1280 px.
• Décalage haut desktop (px) — distance entre le haut de la fenêtre et la sidebar flottante. Augmentez cette valeur si votre thème possède un header sticky (90 px par défaut).

Contenu de la barre

• Afficher l’image produit — miniature de l’image de couverture.
• Afficher le sélecteur de variante — liste déroulante compacte des déclinaisons (masquée automatiquement si le produit n’a pas de combinaisons).
• Afficher le sélecteur de quantité — boutons moins / plus (affiché sur desktop ; sur mobile, la quantité reste à 1 pour préserver la compacité).
• Masquer quand le bouton principal est visible — la barre n’apparaît que lorsque le bouton « Ajouter au panier » d’origine sort du viewport (recommandé). Désactivez pour une barre visible en permanence.

Couleurs

• Couleur de fond — fond de la barre (blanc par défaut).
• Couleur du bouton — bouton d’ajout au panier (teal #2fb5d2 par défaut).
• Couleur du texte du bouton — libellé du bouton.
• Couleur du texte — nom du produit et libellés.
• Couleur du prix — optionnelle ; si vide, la couleur du bouton est utilisée.

Fonctionnement

Détection de visibilité

Le module observe le bloc « Ajouter au panier » d’origine avec l’API IntersectionObserver du navigateur. Dès que ce bloc sort du viewport (l’utilisateur a scrollé), la barre sticky apparaît avec une animation de glissement. Dès qu’il revient en vue, la barre disparaît. Ce mécanisme est natif au navigateur et n’ajoute aucun coût de performance au scroll.

Sélecteur de variante

Pour les produits avec combinaisons, le mini-sélecteur affiche chaque déclinaison avec son prix et sa disponibilité (les déclinaisons en rupture sont désactivées). La sélection est locale à la barre sticky : elle ne modifie pas l’interface de variantes de la page principale. Quand le client change de variante depuis la page principale, la barre sticky se synchronise automatiquement via l’évènement updatedProduct de PrestaShop.

Ajout au panier

Le clic sur le bouton sticky envoie une requête AJAX POST directement au contrôleur panier de PrestaShop (même endpoint que le thème), avec la déclinaison et la quantité choisies dans la barre. En cas de succès, le module émet l’évènement updateCart : le compteur du panier dans l’en-tête et l’aperçu du panier de votre thème se mettent à jour normalement, et le bouton sticky affiche une coche de confirmation.

Affichage mobile

Sur mobile, la barre s’adapte automatiquement :

• Produit sans variantes — une seule ligne : miniature, nom, prix et bouton. Sous 600 px le libellé du bouton laisse place à l’icône panier ; sous 380 px la miniature est masquée.
• Produit avec variantes — deux lignes : miniature, nom, prix et bouton sur la première ; sélecteur de variante en pleine largeur sur la seconde.

La barre respecte la zone safe-area-inset-bottom des iPhone à encoche et la préférence prefers-reduced-motion des utilisateurs sensibles aux animations.

Compatibilité thème

Le module cible les sélecteurs CSS standards du thème Classic et de ses dérivés : .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. La grande majorité des thèmes du marché reprennent ces conventions.

Si votre thème utilise des classes différentes, deux fonctions à adapter se trouvent en tête du fichier views/js/dfstickyaddtocart.js : getMainBtn() (sélecteur du bouton natif) et getMainForm() (sélecteur du formulaire produit). Ce sont les deux seuls points de contact avec votre thème.

Dépannage

La barre n’apparaît pas

1. Vérifiez que le module est activé dans sa configuration et que l’affichage est actif pour le device testé (mobile / desktop).
2. Videz le cache PrestaShop (Paramètres avancés > Performances) puis rechargez la page avec Ctrl+Maj+R.
3. Si l’option « Masquer quand le bouton principal est visible » est active, la barre n’apparaît qu’après avoir scrollé au-delà du bouton d’origine — c’est le comportement attendu.
4. Vérifiez dans la console du navigateur qu’aucune erreur JavaScript d’un autre module ne bloque l’exécution de la page.

L’ajout au panier ne fonctionne pas

1. Ouvrez la console du navigateur : le module y consigne ses erreurs avec le préfixe [dfsticky].
2. Vérifiez dans l’onglet Réseau la requête POST vers le contrôleur panier : le code HTTP et le corps de la réponse indiquent la cause exacte (rupture de stock, quantité minimale, etc.).
3. Le module tolère les avertissements PHP en environnement de développement (il extrait le JSON même si des warnings le précèdent), mais un environnement de production propre reste recommandé.

La sidebar chevauche le header du thème

Augmentez la valeur Décalage haut desktop (px) dans la configuration jusqu’à ce que la sidebar se positionne sous votre header sticky.

FAQ technique

Le module ralentit-il les pages ?

Non. Les assets (environ 7 ko de CSS et 12 ko de JavaScript) ne sont chargés que sur le contrôleur product. Aucune bibliothèque externe, aucun listener de scroll : la visibilité est gérée par IntersectionObserver.

Est-il compatible multiboutique ?

Oui. Toutes les valeurs sont stockées via la classe Configuration de PrestaShop avec le contexte multiboutique natif : chaque boutique peut avoir ses propres couleurs et réglages.

Quels hooks sont utilisés ?

actionFrontControllerSetMedia (enregistrement des assets), displayFooterProduct (rendu du markup) et displayHeader (micro-CSS critique anti-flash).

Les textes sont-ils traduisibles ?

Oui. Toutes les chaînes passent par le système de traduction PrestaShop. Le module est livré en français, anglais, espagnol et allemand ; ajoutez d’autres langues via International > Traductions.

Journal des versions

1.0.3

• Analyse tolérante des réponses du contrôleur panier : le JSON est correctement extrait même lorsque des avertissements PHP le précèdent (environnements de développement).
• Corps de requête au format URL-encoded, identique à la sérialisation native du thème, pour une compatibilité maximale.
• Suppression définitive de tout déclenchement programmatique du bouton natif : les deux boutons sont désormais totalement indépendants.

1.0.2

• Suppression du rendu de la modale de confirmation retournée par le contrôleur panier, qui pouvait laisser une surcouche invisible bloquant les clics sur certaines pages. La confirmation passe par l’évènement updateCart et la coche du bouton sticky.
• Nettoyage défensif des modales orphelines au chargement de la page.

1.0.1

• Passage à l’ajout au panier par requête AJAX directe : le module ne modifie plus le formulaire produit et ne dépend plus de l’état du DOM du thème.
• Références DOM résolues à la volée pour résister au remplacement du formulaire par le moteur de combinaisons.
• Réinitialisation de sécurité de l’indicateur de chargement.

1.0.0

• Version initiale : barre sticky mobile et desktop, mini-sélecteur de variante, sélecteur de quantité, personnalisation des couleurs, accessibilité ARIA, multiboutique, FR/EN/ES/DE.