Blog
Comment ajouter un panier coulissant AJAX à PrestaShop 8 et 9 (sans modifier le thème)
Lorsqu’un client ajoute un produit dans une boutique PrestaShop 1.7, 8 ou 9 standard, le thème affiche une fenêtre de confirmation. Pour modifier une quantité, retirer un article ou saisir un code promo, le client doit ouvrir une page panier séparée, puis retrouver le chemin vers les produits.
Un panier coulissant garde tout cela sur la page où se trouve déjà le client. Ce guide présente ce que PrestaShop propose par défaut, les deux façons d’ajouter un panier coulissant AJAX et une configuration pas à pas qui ne touche pas aux fichiers de votre thème.
Ce que PrestaShop propose par défaut
Dans PrestaShop, le panier est géré par le module Panier fourni avec la boutique. Sur le thème Classic, il fonctionne ainsi :
- Le client clique sur « Ajouter au panier » et une fenêtre modale confirme que le produit a été ajouté.
- La fenêtre modale propose deux boutons : continuer les achats ou passer commande.
- Toute modification du panier (quantité, suppression d’un produit, bon de réduction) se fait sur la page panier, qui se recharge entièrement.
- Sur mobile, la fenêtre modale couvre la majeure partie de l’écran et la page panier constitue une étape à part avant la commande.
Ce parcours fonctionne, mais chaque modification du panier éloigne le client de la liste des produits. Environ 70 % des paniers en ligne sont abandonnés selon le Institut Baymard, et les étapes entre « ajouter au panier » et « payer » font partie des moments où les clients décrochent.
Ce que change un panier coulissant AJAX
Un panier coulissant AJAX est un panneau qui glisse depuis le bord de l’écran lorsqu’un produit est ajouté. La page en dessous reste là où elle était.
- Les quantités se modifient avec les boutons plus et moins, sans recharger la page.
- Les produits se retirent directement depuis le panneau et les totaux se mettent à jour immédiatement.
- Les codes promo se saisissent dans le même panneau.
- Une barre de livraison gratuite indique le montant restant pour atteindre le seuil.
- Le bouton de commande reste toujours à portée de doigt.
Deux façons d’ajouter un panier coulissant
Option 1 : l’intégrer à votre thème
Un développeur peut remplacer la fenêtre modale du panier par un panneau sur mesure. Cela implique de modifier les templates du thème, d’écouter les événements du panier de PrestaShop en JavaScript, d’appeler le contrôleur du panier en AJAX et de mettre en forme le résultat pour ordinateur et mobile.
Cela offre un contrôle total, mais le travail réside dans le thème. Une mise à jour du thème peut l’écraser, et chaque nouvelle fonctionnalité (codes promo dans le panneau, barre de livraison, suggestions de produits) représente un morceau de code sur mesure de plus à maintenir.
Option 2 : installer un module
Un module de panier coulissant ajoute le panneau via les hooks de PrestaShop. Les fichiers du thème restent intacts, le panneau résiste aux mises à jour du thème et les options s’activent dans les réglages du module au lieu d’être codées.
La suite de ce guide utilise Sliding Cart Block, notre module de panier coulissant AJAX pour PrestaShop 1.7.8, 8 et 9. Les étapes sont similaires pour d’autres modules : téléverser, configurer, vérifier les hooks, tester.
Pas à pas : ajouter un panier coulissant sans modifier le thème
1. Vérifier la configuration requise
- PrestaShop 1.7.8 ou version ultérieure, y compris PrestaShop 8 et 9.
- PHP 7.2 ou version ultérieure (PrestaShop 9 lui-même nécessite PHP 8.1 ou version ultérieure).
- Un compte back-office autorisé à gérer les modules.
Si vous prévoyez en même temps une mise à niveau vers PrestaShop 9, analysez d’abord vos autres modules.
Vérificateur gratuit de compatibilité PrestaShop 9 pour les modules →
2. Téléverser le module
- Dans le back-office, allez dans Modules → Gestionnaire de modules.
- Cliquez sur « Installer un module » en haut à droite.
- Déposez le fichier ZIP du module dans la zone de téléversement.
- Une fois l’installation terminée, cliquez sur « Configurer ».
3. Choisir comment le panier s’ouvre
Les premiers réglages définissent ce qui se passe après « Ajouter au panier » :
- Ouvrir automatiquement le panneau du panier après l’ajout d’un produit, ou le laisser fermé et mettre à jour uniquement l’icône du panier.
- Un réglage distinct pour les mobiles, avec un point de rupture sur la largeur d’écran (480 px par défaut). Beaucoup de boutiques laissent le panneau fermé sur les petits écrans et l’ouvrent sur ordinateur.
- Panneau à gauche ou à droite, mode clair ou sombre, et affichage pleine largeur sur mobile.
- Une barre latérale optionnelle qui reste ouverte sur les grands écrans (1300 px et plus par défaut).
4. Activer ce que le panier doit afficher
- Boutons de quantité, images des produits et attributs sélectionnés (taille, couleur).
- Champ de code promo et total des économies.
- Barre de livraison gratuite. Elle reprend le seuil de livraison gratuite défini dans les réglages de vos transporteurs : aucun montant à ressaisir.
- Jusqu’à trois paliers de récompense sur la barre de progression, par exemple une remise, un cadeau et la livraison gratuite.
- Suggestions de produits dans le panneau et dans la fenêtre d’ajout au panier.
- Un message de commande minimum qui désactive le bouton de commande en dessous du montant minimum.
5. Vérifier les hooks
Le panneau est greffé via des hooks, aucun template n’a donc besoin d’être modifié. Si le panier n’apparaît pas après l’installation, allez dans Apparence → Positions et vérifiez que le module est greffé sur displayHeader et displayNav.
Si un autre module de panier est actif, il peut afficher un deuxième panier ou une deuxième fenêtre. Désactivez l’autre module avant de tester.
6. Vider le cache et tester
Videz le cache de PrestaShop dans Paramètres avancés → Performances, puis testez en tant que client :
- Ajouter un produit depuis une page catégorie et depuis une page produit.
- Modifier une quantité et retirer un produit dans le panneau.
- Appliquer un code promo.
- Vérifier la barre de livraison gratuite en dessous et au-dessus du seuil.
- Recommencer sur mobile, puis passer une commande test.
Tous les réglages expliqués dans la documentation de Sliding Cart Block →
Ce qu’il faut mesurer après le changement
Comparez les quatre semaines avant et après le changement, séparément sur ordinateur et sur mobile :
- Taux de passage de l’ajout au panier à la commande.
- Taux d’abandon de panier.
- Panier moyen, si vous avez activé la barre de livraison gratuite ou les suggestions de produits.
Comment mesurer l’abandon de panier dans PrestaShop →
Bonnes pratiques UX du panier sur mobile pour PrestaShop →
Foire aux questions
Dois-je modifier mon thème pour ajouter un panier coulissant ?
Non. Un module ajoute le panneau via les hooks de PrestaShop, les fichiers du thème restent donc tels quels. Certains thèmes nécessitent quelques lignes de CSS pour harmoniser les couleurs ou les espacements.
Un panier coulissant remplace-t-il la page panier ?
Non. La page panier et le tunnel de commande continuent de fonctionner comme avant. Le panier coulissant est une couche supplémentaire qui gère les actions les plus courantes sans quitter la page.
Fonctionne-t-il sur PrestaShop 9 ?
Sliding Cart Block fonctionne sur PrestaShop 1.7.8, 8 et 9. Si vous mettez à niveau toute la boutique, vérifiez que vos autres modules n’utilisent pas de code supprimé dans PrestaShop 9.
Va-t-il ralentir la boutique ?
Le panneau utilise son propre contrôleur AJAX et ne charge que les données dont le panier a besoin. La page produit elle-même ne se recharge pas quand le panier change.
Les clients peuvent-ils utiliser des codes promo dans le panier coulissant ?
Oui. Un champ de code promo repliable peut être activé dans le panneau, et les totaux se mettent à jour dès que le code est appliqué.