Module Quick View PrestaShop 8/9 — Documentation

Présentation

DF Quick View remplace l’aperçu rapide natif de votre thème PrestaShop par une modale moderne : galerie d’images complète, sélection des déclinaisons en direct, indicateur de stock, sélecteur de quantité et ajout au panier en AJAX. Grâce au préchargement au survol, la modale s’ouvre instantanément et le client reste sur sa page de catégorie tout au long de son parcours.

Le module ne surcharge aucun template de thème : il s’insère par le hook standard actionFrontControllerSetMedia et travaille côté navigateur sur les vignettes produit existantes. Le JavaScript est natif, sans jQuery ni dépendance externe.

Prérequis

• PrestaShop 8.0 à 9.x
• PHP 7.4 ou supérieur
• Un thème affichant des vignettes produit sur les pages de listing (le thème Classic et ses dérivés fonctionnent sans réglage)

Installation

1. Téléchargez l’archive dfquickview-1.0.0.zip depuis votre compte client DataFirefly.
2. Dans le back-office, allez dans Modules > Gestionnaire de modules, cliquez sur Installer un module et déposez l’archive.
3. Cliquez sur Installer, puis sur Configurer.

Aucune table n’est créée en base : le module ne stocke que ses réglages dans la table de configuration de PrestaShop. La désinstallation est propre et supprime toutes ses clés.

Configuration

Mode de déclenchement

Trois modes déterminent comment la modale s’ouvre :

• Interception — le module capture les liens d’aperçu rapide de votre thème (les éléments portant les classes .quick-view, .js-quick-view ou l’attribut data-link-action="quickview") et ouvre sa propre modale à la place. Le comportement natif est neutralisé.
• Injection — le module ajoute son propre bouton en superposition sur chaque vignette produit. Utile si votre thème ne propose aucun quick view.
• Les deux (recommandé, valeur par défaut) — les deux mécanismes sont actifs.

Sélecteur CSS des vignettes produit

Le module a besoin de savoir quels éléments de la page correspondent à une vignette produit. La valeur par défaut, .product-miniature, .js-product-miniature, couvre le thème Classic et la grande majorité des thèmes enfants.

Si votre thème utilise une autre structure, ouvrez une page de catégorie, inspectez le conteneur d’un produit dans les outils de développement de votre navigateur, et reportez sa classe ici. Le module recherche ensuite l’identifiant produit dans l’attribut data-id-product à l’intérieur de la vignette, et, à défaut, le déduit de l’URL du lien produit.

Préchargement intelligent

Activé par défaut. Dès que le curseur s’attarde sur une vignette produit pendant la durée du délai de préchargement (120 ms par défaut), le module récupère les données du produit en arrière-plan et précharge sa première image. Au clic, tout est déjà en mémoire : la modale s’ouvre sans latence.

Sur mobile, le préchargement se déclenche au premier contact tactile avec la vignette.

Une seule requête est envoyée par produit, même si le visiteur survole la même vignette plusieurs fois. Si le préchargement vous inquiète pour la charge serveur, augmentez le délai (300 à 500 ms filtrent les survols involontaires) ou désactivez-le : la modale se chargera alors au clic, avec un squelette de chargement animé.

Durée de vie du cache client

Les données produit récupérées sont conservées dans la session du navigateur pendant la durée indiquée (300 secondes par défaut). Un visiteur qui rouvre la même modale ne déclenche aucune nouvelle requête.

Le cache est cloisonné par langue, devise, boutique et groupe client : un visiteur ne peut jamais voir le prix calculé pour un autre groupe. Réglez la valeur à 0 pour désactiver totalement le cache de session (le cache mémoire de la page reste actif).

Contenu affiché

• Afficher la description courte — affiche le résumé du produit dans la modale (masqué sur mobile pour préserver la place).
• Afficher la référence produit — affiche la référence du produit, ou celle de la déclinaison sélectionnée si elle en possède une.
• Afficher le lien « Voir la fiche produit » — ajoute un lien vers la fiche complète sous le bouton d’ajout au panier.

Charger sur toutes les pages

Par défaut, les ressources du module ne sont chargées que sur les pages de listing : accueil, catégories, recherche, marques, fournisseurs, promotions, nouveautés et meilleures ventes. Activez cette option si vous affichez des vignettes produit ailleurs — pages CMS, blocs personnalisés, modules tiers.

Couleur d’accentuation

Détermine la couleur des boutons, des contours de sélection et des états actifs dans la modale. Saisissez une couleur hexadécimale correspondant à votre charte.

Fonctionnement de la modale

Galerie

La modale affiche toutes les images du produit : image principale, vignettes cliquables en dessous, flèches précédent et suivant. La navigation au clavier est prise en charge (flèches gauche et droite pour changer d’image, touche Échap pour fermer) et le balayage tactile fonctionne sur mobile.

Si la déclinaison sélectionnée a des images associées dans PrestaShop, la galerie se limite automatiquement à ces images. Sinon, l’ensemble des images du produit reste affiché.

Déclinaisons

Les groupes d’attributs sont rendus selon leur type configuré dans PrestaShop :

• Pastille de couleur — les groupes marqués comme groupes de couleur affichent une pastille ronde, avec la texture si un fichier de texture existe pour l’attribut, sinon la couleur hexadécimale.
• Liste déroulante — les groupes de type « liste déroulante » affichent un menu.
• Bouton — les autres groupes affichent des pastilles rectangulaires cliquables.

À chaque changement de sélection, le module recalcule la combinaison correspondante et met à jour le prix, le prix barré, le pourcentage de remise, la référence, le stock, la quantité minimale et les images.

Deux états visuels signalent les impasses :

• Grisé — l’attribut, combiné à la sélection en cours, ne correspond à aucune déclinaison existante.
• Atténué — la combinaison existe mais est en rupture, et le produit n’autorise pas la commande en rupture.

Stock et quantité

Trois états sont affichés selon la disponibilité de la déclinaison sélectionnée : en stock, en réapprovisionnement (rupture autorisée à la commande) ou épuisé (le bouton d’ajout est alors désactivé).

Le sélecteur de quantité respecte la quantité minimale définie sur le produit ou sur la déclinaison : il s’initialise sur cette valeur et interdit de descendre en dessous.

Ajout au panier

L’ajout est envoyé en AJAX au contrôleur panier natif de PrestaShop. En cas de succès, le module émet l’événement updateCart du framework front-office : le bloc panier de votre en-tête se met à jour automatiquement, sans rechargement.

Les erreurs renvoyées par la boutique — rupture, quantité minimale non atteinte, produit indisponible — sont affichées dans la modale, sous le bouton.

Les produits comportant des champs de personnalisation obligatoires ne peuvent pas être ajoutés au panier depuis une modale : le module affiche un message et invite le client à ouvrir la fiche produit complète.

Compatibilité avec la navigation à facettes

Lorsque le client applique un filtre, PrestaShop remplace la liste des produits sans recharger la page. Le module écoute l’événement updateProductList et surveille aussi les modifications du document : ses boutons sont réinjectés automatiquement sur les nouvelles vignettes, sans intervention de votre part.

Dépannage

Aucun bouton n’apparaît sur les vignettes

Vérifiez d’abord que le mode de déclenchement inclut l’injection (« Injection » ou « Les deux »). Puis vérifiez le sélecteur CSS des vignettes : ouvrez une page de catégorie, inspectez le conteneur d’un produit et confirmez qu’il correspond au sélecteur configuré. Enfin, assurez-vous que la vignette contient bien un attribut data-id-product ou un lien vers la fiche produit.

La modale ne s’ouvre pas au clic sur le quick view du thème

Le mode de déclenchement doit inclure l’interception (« Interception » ou « Les deux »). Certains thèmes utilisent des classes non standard pour leur bouton : dans ce cas, passez en mode « Injection » et masquez le bouton natif de votre thème par une règle CSS dans votre feuille de style personnalisée.

Les ressources ne se chargent pas sur une page particulière

Le module ne charge ses ressources que sur les pages de listing standard. Si vous affichez des vignettes produit sur une page CMS ou dans un module tiers, activez l’option Charger sur toutes les pages.

Les modifications de configuration ne sont pas visibles

Videz le cache de PrestaShop (Paramètres avancés > Performances > Vider le cache) et rechargez la page en forçant le rafraîchissement du navigateur. Si vous avez modifié la durée de vie du cache client, les visiteurs déjà en session conservent leurs données jusqu’à expiration.

Le prix affiché dans la modale ne correspond pas à celui de la liste

Les prix de la modale sont calculés côté serveur avec la même méthode que la fiche produit, en tenant compte du groupe client, de la devise et des taxes. Si un écart persiste, vérifiez que votre thème n’applique pas un affichage de prix personnalisé sur les vignettes, et videz le cache client en réglant temporairement sa durée de vie à 0.

Désinstallation

Depuis le gestionnaire de modules, choisissez Désinstaller. Toutes les clés de configuration du module sont supprimées. Aucune donnée produit ni de commande n’est affectée.