Module Comparateur de Produits — Installation et configuration
Installation, configuration et fonctionnement du module Comparateur de Produits.
Présentation
Le module Comparateur de Produits (dfcomparator) ajoute à votre boutique PrestaShop un comparateur côte à côte complet. Des boutons « Comparer » apparaissent automatiquement sur la page produit et dans les listes, et une page dédiée aligne les produits sélectionnés en colonnes : prix, caractéristiques, disponibilité, etc.
Le comparateur est écrit en JavaScript vanilla, sans jQuery ni dépendance externe. Il fonctionne dès l’installation, sans configuration supplémentaire.
Compatibilité
- PrestaShop 8.0 à 9.x
- Mono-boutique et multi-boutique
- 5 langues : FR, EN, ES, DE, IT
- Aucune dépendance (ni Composer ni framework)
Installation
- Dans le back-office, ouvrez Modules > Gestionnaire de modules.
- Cliquez sur Installer un module puis sélectionnez le fichier
dfcomparator.zip. - Une fois installé, cliquez sur Configurer.
Le module enregistre automatiquement ses hooks (actionFrontControllerSetMedia, displayProductAdditionalInfo, displayFooter) et crée sa table de stockage à l’installation. La désinstallation supprime cette table.
Configuration
Général
- Nombre maximum de produits : de 2 à 6 colonnes comparables (4 par défaut).
- Libellé du bouton : texte affiché sur le bouton « Comparer ».
- Couleur d’accent : couleur des boutons, badges et éléments mis en avant.
- Ouvrir dans un nouvel onglet : ouvre la page de comparaison dans un onglet séparé.
Emplacements des boutons
- Afficher sur la page produit : ajoute le bouton sur la fiche produit.
- Afficher dans les listes : ajoute le bouton sur les vignettes des listes (catégories, recherche).
- Barre flottante : affiche la barre de comparaison persistante avec vignettes et compteur.
Sur les listes, les boutons sont réinjectés automatiquement après chaque filtrage Ajax (navigation à facettes, pagination, tri).
Page de comparaison
- Surbrillance du meilleur prix : met en avant la colonne au prix le plus bas avec un badge.
- Ligne prix : affiche ou masque la ligne de prix.
- Bouton d’ajout au panier : ajoute un bouton panier dans chaque colonne.
- Colonnes figées (sticky) : fige l’en-tête et la première colonne au défilement.
- Différences seulement par défaut : active d’emblée le masquage des lignes identiques.
Lignes comparées
Chaque ligne peut être activée ou désactivée individuellement : référence, marque, état, disponibilité, poids, dimensions et description courte. Les caractéristiques produit (« Features » PrestaShop) sont ajoutées automatiquement, une ligne par caractéristique, dans l’ordre défini au catalogue. Une ligne est marquée « identique » lorsque sa valeur est la même sur tous les produits comparés.
Fonctionnement et persistance
La sélection est conservée côté client par un jeton de navigateur (cookie dfcmp_token) doublé d’un miroir localStorage pour un rendu instantané. Pour un client connecté, les sélections faites sur plusieurs appareils sont fusionnées. Une URL partageable (par identifiants de produits, ?ids=...) permet d’envoyer ou de retrouver une comparaison.
Performances
Le module ne charge ses scripts qu’au besoin et n’effectue d’appel Ajax que lors d’une action (ajout, suppression, ouverture). Le rendu initial de la barre s’appuie sur le cache local, sans attendre le serveur.
FAQ et dépannage
Le bouton « Comparer » n’apparaît pas
Vérifiez que l’affichage page produit / listes est activé dans la configuration, puis videz le cache PrestaShop (Paramètres avancés > Performances). Sur un thème très personnalisé, le bouton des listes s’insère dans la vignette produit : assurez-vous que le thème expose bien l’identifiant produit sur la vignette.
La barre flottante reste vide
La barre n’apparaît qu’une fois au moins un produit ajouté à la comparaison. Vérifiez également que l’option « Barre flottante » est active.
Le meilleur prix n’est pas mis en avant
Activez les options « Surbrillance du meilleur prix » et « Ligne prix ». La surbrillance compare les prix finaux TTC affichés des produits de la comparaison.