Image au Survol & Badges Automatiques — Guide de configuration
Installer et configurer l'image au survol et les badges automatiques Nouveau, Promo et Stock faible.
Ce guide explique comment installer et configurer le module Image au Survol & Badges Automatiques pour PrestaShop 8 et 9. Le module affiche la deuxième image du produit au survol dans les listings et applique automatiquement des badges Nouveau, Promo et Stock faible selon des règles que vous définissez, sans surcharger votre thème.
Installation
L’installation se fait comme pour tout module PrestaShop :
- Depuis le back-office, allez dans Modules > Module Manager.
- Cliquez sur Installer un module et déposez l’archive ZIP du module.
- Une fois l’installation terminée, cliquez sur Configurer pour ouvrir la page de réglages.
Le module enregistre le hook actionFrontControllerSetMedia et charge ses assets (CSS et JavaScript) uniquement sur les pages de listing et la page produit. Aucun fichier de template n’est surchargé.
Configuration de l’image au survol
Le premier bloc de configuration pilote le remplacement d’image au survol :
- Afficher la seconde image au survol : active ou désactive l’effet. Les produits qui n’ont qu’une seule image sont ignorés automatiquement.
- Effet de transition : Fondu, Fondu + zoom ou Instantané.
- Position des badges : coin où s’affichent les badges (haut gauche, haut droite, bas gauche, bas droite). Ce réglage est commun à tous les badges.
L’image de survol correspond à la deuxième image du produit selon l’ordre de position défini dans l’onglet Images de la fiche produit. Pour changer l’image affichée au survol, réordonnez simplement les images du produit.
Les trois badges automatiques
Chaque badge peut être activé indépendamment, avec son propre libellé multilingue, sa couleur de fond et sa couleur de texte.
Badge « Nouveau »
Il s’affiche pendant un nombre de jours configurable après la date de création du produit. La valeur par défaut reprend le réglage PrestaShop PS_NB_DAYS_NEW_PRODUCT. Réglez la durée souhaitée dans le champ Produit considéré comme nouveau pendant (jours).
Badge « Promo »
Il s’affiche lorsqu’un produit est marqué « En promotion » ou qu’un prix spécifique avec réduction est actif pour le contexte du visiteur (boutique, devise, pays, groupe client et dates de validité). L’option Afficher le pourcentage de remise remplace le libellé par la valeur, par exemple -20 %, lorsque la réduction est exprimée en pourcentage.
Badge « Stock faible »
Il s’affiche lorsque la quantité disponible du produit est strictement supérieure à 0 et inférieure ou égale au seuil de stock faible que vous définissez. La quantité est lue dans la table stock_available avec résolution multiboutique (la boutique courante est prioritaire sur le groupe de boutiques).
Libellés multilingues
Les libellés Nouveau, Promo et Stock faible sont fournis par défaut en français, anglais, espagnol, allemand et italien. Chaque libellé est éditable langue par langue depuis la page de configuration : sélectionnez la langue dans le sélecteur du champ, puis saisissez le texte voulu.
Performance et compatibilité
- Un seul appel AJAX groupé par page récupère les données de tous les produits visibles (jusqu’à 120 produits par lot).
- L’image de survol est chargée en lazy load, uniquement au premier survol de la souris.
- Le script est en JavaScript vanilla, sans dépendance jQuery.
- Le module détecte les miniatures produit en JavaScript : il est compatible avec le thème classic et les thèmes enfants, et se réadapte automatiquement après la navigation à facettes et la pagination AJAX.
- Sur mobile tactile, le remplacement d’image au survol est désactivé automatiquement.
Dépannage
Le survol ne montre pas de seconde image. Vérifiez que le produit possède au moins deux images dans l’onglet Images de sa fiche, et que l’option d’image au survol est activée.
Un badge n’apparaît pas. Assurez-vous que le badge est activé, que son libellé n’est pas vide pour la langue courante, et que la condition est remplie (produit récent, prix spécifique actif, ou quantité sous le seuil).
Rien ne s’affiche après un filtre. Le module se réadapte après la navigation à facettes ; si votre thème utilise un mécanisme de rendu personnalisé, videz le cache PrestaShop (Paramètres avancés > Performances) après installation.