Aperçu produit instantané - Fenêtre Quick View avec carrousel d'images, au survol ou au clic, compatible tous thèmes

La liste de produits cesse d'être un cul-de-sac

Un visiteur qui parcourt une page catégorie se pose une seule question : est-ce le bon produit ? Y répondre coûte normalement un clic vers la fiche produit et un clic pour revenir — et chacun de ces allers-retours est une occasion de le perdre.

Ce module répond à la question là où il se trouve déjà. Il pointe une image, ou clique sur un petit bouton loupe, et une fenêtre d'aperçu s'ouvre par-dessus la liste : les photos du produit dans un carrousel, son nom, son prix, son résumé et son badge New (nouveau) ou On sale (en promotion). Aucun rechargement de page, rien à installer dans votre thème.

Au survol ou au clic — c'est vous qui tranchez

Réglez le déclencheur sur au survol et l'aperçu suit l'attention du visiteur sans le moindre clic. Réglez-le sur au clic et un petit bouton loupe apparaît sur l'image à la place.

Le mode clic est rigoureux sur un point essentiel : un clic normal sur l'image ouvre toujours la fiche produit. Seul le bouton loupe ouvre l'aperçu. Les visiteurs qui savent ce qu'ils veulent ne sont jamais interceptés.

Deux dispositions

La disposition verticale place l'image principale en haut avec une bande de miniatures en dessous. L'horizontale met l'image à gauche et les informations à droite. Les deux partagent la même feuille de style et le même template — passer de l'une à l'autre est un réglage, pas un autre chemin de code.

En disposition verticale, pointer une miniature change immédiatement l'image principale. Le diaporama optionnel fait défiler les photos selon un intervalle que vous choisissez entre 1000 et 20000 ms, et il se met en pause tant que le visiteur pointe l'image, pour ne jamais escamoter une photo sous les yeux de quelqu'un qui est justement en train de la regarder.

À savoir avant de choisir : la bande de miniatures fait partie de la seule disposition verticale. En disposition horizontale, les photos se parcourent via le diaporama : si vous retenez l'horizontale et que vous désactivez le diaporama, vos visiteurs ne verront jamais que la première photo.

Le prix affiché est celui qui sera payé

Il est calculé côté serveur, pas deviné dans le navigateur. La fenêtre utilise la devise du visiteur, les règles de taxe qui s'appliquent à lui et son groupe de clients — y compris le fait que ce groupe ait ou non le droit de voir les prix.

Si votre boutique tourne en mode catalogue, si les prix du produit sont désactivés, ou si le groupe du visiteur n'a pas accès aux prix, le bloc prix n'est tout simplement pas affiché. Vous n'avez pas à penser à le désactiver.

Des badges qui disent la vérité

Le badge New (nouveau) n'apparaît que pour les produits réellement récents, selon le réglage nombre de jours pendant lesquels le produit est considéré comme nouveau de votre propre boutique — il disparaît donc de lui-même dès qu'un produit cesse d'être une nouveauté.

On sale (en promotion) suit la case Afficher le drapeau "En promo !" de l'onglet Prix du produit. Il ne se déclenche délibérément pas sur les remises : un produit dont le prix est réduit n'obtient pas de badge "On sale" tant que vous ne l'avez pas effectivement marqué comme étant en promotion. C'est précisément l'intérêt — le badge signifie ce que vous avez décidé qu'il signifie, et non ce qu'un prix spécifique a fait de son côté.

Il résiste à la recherche à facettes et au défilement infini

Les événements sont délégués : les vignettes produit qui apparaissent après le chargement de la page — filtrées par la recherche à facettes, ajoutées par le défilement infini, remplacées par un module tiers — fonctionnent immédiatement. Aucune réinitialisation à prévoir, rien à rebrancher.

Un seul interrupteur pour le Quick view de votre thème

La plupart des thèmes embarquent leur propre bouton Quick view, et deux fenêtres concurrentes font une mauvaise expérience. Plutôt que de vous renvoyer vers l'édition de votre thème, le module peut masquer ce bouton à votre place d'un simple interrupteur.

Il connaît aussi bien le balisage Classic (.quick-view, [data-link-action="quickview"]) que celui de Hummingbird (.product-miniature__quickview-button, [data-ps-action="open-quickview"]). Et il gère le détail qui pose habituellement problème : le bouton se trouve souvent dans un panneau blanc affiché au survol, si bien que masquer le seul bouton laisse une bande blanche vide sur la vignette. Le module mesure ce que ce panneau contient réellement — si le Quick view était son unique contenu, tout le panneau disparaît, et s'il contient aussi des pastilles de couleur, celles-ci restent visibles.

Où il s'affiche, et où il s'abstient délibérément

L'aperçu se charge sur les pages d'accueil, catégorie, résultats de recherche, marque, fournisseur, nouveautés, meilleures ventes et promotions — ainsi que sur la fiche produit, pour que les blocs Produits de la même catégorie et Produits consultés en bénéficient également.

Le tunnel de commande n'est jamais touché. Absolument rien n'y est chargé.

Les mobiles conservent leur comportement habituel

Le survol n'existe pas sur un écran tactile, et une fenêtre d'aperçu qui se bat avec un appui vaut moins que pas d'aperçu du tout. Fixez une largeur d'écran minimale — 432 px par défaut — et en dessous le module se désactive complètement, laissant à vos visiteurs mobiles le comportement simple et rapide qu'ils attendent.

La version 3 a remplacé deux points d'entrée réellement dangereux

Cela mérite d'être dit clairement.

La version 2.x livrait des fichiers ajax/*.php autonomes qui amorçaient le cœur de PrestaShop à la main et n'étaient protégés que par un jeton codé en dur — la même valeur dans toutes les installations de la planète. Quiconque avait lu le module une fois connaissait le jeton de toutes les boutiques qui l'utilisaient.

La version 3 les remplace par un véritable contrôleur front-office PrestaShop protégé par un jeton propre à la boutique, comparé avec hash_equals(). Le contrôleur valide l'identifiant du produit et ne sert que les produits actifs, visibles au catalogue et appartenant à la boutique courante. Tout le reste reçoit une 404 ou une 403.

Ce que la version 3 a corrigé par ailleurs

La version 2.x chargeait jquery-1.11.0.min.js depuis un chemin qui n'existe plus dans PrestaShop 1.7 ni au-delà, ce qui cassait silencieusement la fenêtre sur beaucoup de boutiques. Elle embarquait aussi seize fichiers jQuery par version, chacun contenant sa propre implémentation SHA-1 de 130 lignes. Tout cela a disparu : le front-office repose désormais sur un unique fichier JavaScript vanilla, sans aucune dépendance.

L'ancien bricolage du cookie web_url a lui aussi disparu — la configuration parvient maintenant au fichier JavaScript via Media::addJsDef.

Les URL simplifiées n'entrent plus en ligne de compte. Le produit est identifié par l'attribut data-id-product de sa propre vignette, avec une URL en secours, au lieu d'analyser des adresses réécrites.

Les formats d'images sont détectés, non codés en dur. La fenêtre choisit les formats adaptés dans vos Apparence → Paramètres d'images au lieu de supposer des noms qui changent d'une version de PrestaShop à l'autre : les thèmes personnalisés dont les types d'images ont été renommés continuent donc de fonctionner.

La version 3.0.2 l'a fait fonctionner sur Hummingbird

Cela vaut d'être nommé parce que le problème était invisible plutôt que bruyant. Hummingbird génère le lien de la miniature sous la forme .product-miniature__image-link, là où Classic utilise .product-thumbnail / a.thumbnail. Cette classe n'était pas dans le sélecteur de déclenchement : sur Hummingbird, rien ne s'ouvrait du tout — et le bouton Quick view du thème restait affiché, puisqu'aucun de ses noms de classe ne correspondait non plus aux règles de masquage. Les deux sont désormais reconnus au même titre que le balisage Classic, et les fichiers CSS et JavaScript du front-office portent la version du module dans leur URL, si bien que le correctif atteint les visiteurs de retour sans que personne ait à vider un cache.

La page de configuration se contrôle elle-même

À chaque ouverture, le module exécute quatre vérifications — Module activé, Hook front-office, Formats d'images produit et Requêtes sécurisées — et vous affiche le résultat de chacune. Quand l'aperçu ne s'affiche pas, ce panneau vous dit généralement pourquoi avant que vous ne commenciez à chercher. Les fichiers résiduels des versions antérieures à la 3.0.0 sont par ailleurs nettoyés automatiquement.

Compatibilité

PrestaShop 1.7 à 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc.

Aucun override, aucune modification du cœur ni du thème, et pas de jQuery. La mise à jour depuis une version 2.x est automatique : vos réglages sont conservés, les nouvelles options reçoivent des valeurs par défaut cohérentes, et les fichiers obsolètes sont supprimés pour vous.

Questions fréquentes

Un clic normal ouvre-t-il toujours la fiche produit ?

Oui. En mode clic, seul le petit bouton loupe ouvre l'aperçu — cliquer sur l'image elle-même se comporte exactement comme avant. En mode survol, rien n'intercepte les clics.

Le prix affiché dans la fenêtre correspond-il à ce que le client paiera réellement ?

Oui. Il est calculé sur le serveur à partir de sa devise, des règles de taxe qui s'appliquent à lui et de son groupe de clients. En mode catalogue, ou pour un groupe qui n'a pas accès aux prix, le bloc prix n'est pas affiché du tout.

Cela fonctionne-t-il encore quand je filtre une catégorie avec la recherche à facettes ?

Oui. Les événements sont délégués : les vignettes régénérées par la recherche à facettes ou le défilement infini continuent de fonctionner sans réinitialisation.

Mon thème possède déjà un bouton Quick view — vais-je me retrouver avec deux fenêtres ?

Pas si vous laissez l'option Masquer le bouton Quick view du thème activée. Elle couvre le balisage Classic comme celui de Hummingbird, et ne retire le panneau de survol environnant que si le Quick view en était l'unique contenu : les pastilles de couleur ne sont donc pas perdues.

Le module fonctionne-t-il sur mobile ?

Il se désactive volontairement sous la largeur d'écran que vous fixez — 432 px par défaut — parce que le survol n'existe pas sur les écrans tactiles. Vos visiteurs mobiles conservent le comportement habituel.

Mon produit en remise n'affiche pas de badge "On sale" — pourquoi ?

Parce qu'une remise et le drapeau en promo sont deux choses différentes. Le badge suit la case Afficher le drapeau "En promo !" de l'onglet Prix du produit, et non ses prix spécifiques. Cochez cette case et le badge apparaît. Le badge New (nouveau) est automatique et suit le réglage "nombre de jours pendant lesquels le produit est considéré comme nouveau" de votre boutique.

Cela ralentit-il mes pages produit ?

Le contenu HTML de la fenêtre n'est récupéré que lorsqu'un visiteur ouvre réellement un aperçu, et la réponse est mise en cache en privé pendant une minute. La page elle-même charge une petite feuille de style et un petit fichier JavaScript vanilla, et strictement rien dans le tunnel de commande.

Je migre depuis une version 2.x — dois-je faire quelque chose ?

Non. La mise à jour conserve vos réglages existants, attribue des valeurs par défaut cohérentes aux nouvelles options, et supprime d'elle-même les anciens fichiers AJAX autonomes et les ressources propres à chaque version.

Le module modifie-t-il mon thème ou surcharge-t-il des fichiers du cœur ?

Non. Un hook d'affichage et un contrôleur front-office, rien d'autre.