Bannière de Catégorie : guide complet

Présentation et prérequis

Bannière de Catégorie insère des visuels dans la grille produit de vos pages de catégorie, à la position de votre choix. Vous indiquez la catégorie, le numéro de produit après lequel la bannière doit apparaître et l’image à utiliser pour chaque langue. Le module se charge du reste, y compris après un filtre à facettes ou un changement de page.

• Compatible PrestaShop 8.0 à 9.x, thème Classic et thèmes dérivés.
• PHP 7.4 à 8.3.
• Multiboutique et multilingue (fr, en, es, de, it, nl, pl, pt).
• Aucun override, aucune modification de template, aucune tâche CRON.
• Le balisage de la bannière est rendu côté serveur par un template Smarty ; le JavaScript se contente de l’insérer au bon endroit, sans jQuery ni bibliothèque tierce.

Installation

1. Téléchargez l’archive datafireflycategorybanner.zip depuis votre compte client.
2. Dans le back-office, ouvrez Modules > Gestionnaire de modules.
3. Cliquez sur Installer un module et déposez l’archive.
4. Cliquez sur Configurer pour accéder à la liste des bannières.

À l’installation, le module crée ses trois tables (bannières, traductions, association boutiques), crée le dossier /img/datafireflycategorybanner/ et enregistre ses hooks.

Créer une bannière

Depuis la page de configuration, cliquez sur Ajouter une nouvelle bannière. Le formulaire regroupe les réglages suivants.

Ciblage

• Catégorie : la catégorie dans laquelle la bannière doit apparaître. La liste reprend l’arborescence de la boutique, les catégories désactivées étant signalées.
• Appliquer aux sous-catégories : étend la bannière à toutes les sous-catégories de la catégorie choisie, quel que soit leur niveau de profondeur.
• Après le produit numéro : la bannière s’insère après ce produit du listing. La valeur 4 place la bannière après le quatrième produit affiché.

Apparence et lien

• Lien de la bannière : URL de destination, absolue (https://…) ou commençant par une barre oblique (/nouveautes). Laissez vide pour une bannière non cliquable.
• Classe CSS : classes de grille appliquées à la cellule de la bannière, par exemple col-12 ou col-12 col-md-6. Laissez vide pour reprendre automatiquement les classes des cellules produit de votre thème.
• CSS personnalisé : déclarations appliquées à cette bannière uniquement, par exemple border-radius: 12px; padding: 10px;.

Planification et statut

• Date de début et Date de fin : fenêtre d’affichage, au format AAAA-MM-JJ HH:MM:SS. Un champ vide signifie « pas de limite de ce côté ».
• Actif : affiche ou suspend la bannière sans la supprimer.
• Association aux boutiques : en multiboutique, cochez les boutiques concernées.

Images par langue

Les champs Image de la bannière et Texte alternatif existent pour chaque langue active. Les onglets de langue en haut du formulaire affichent les champs de la langue sélectionnée. Quand une image est déjà en place, un aperçu apparaît, accompagné d’un interrupteur Supprimer l’image qui ne touche que cette langue.

Comment la position est calculée

La position s’exprime en nombre de produits, et elle s’applique à chaque page du listing. Une bannière réglée sur 4 apparaît après le quatrième produit de la page courante, que le visiteur soit sur la page 1 ou sur la page 3.

Plusieurs bannières peuvent viser la même catégorie, chacune à sa position. Quand deux bannières partagent la même position, elles s’insèrent l’une après l’autre dans l’ordre d’enregistrement. Si la position dépasse le nombre de produits affichés sur la page, la bannière est simplement ignorée pour cette page, sans décaler les autres.

La bannière prend par défaut la largeur d’une cellule produit : le module lit les classes de grille du premier produit de la liste et les applique à la bannière. Renseignez le champ Classe CSS pour forcer une autre largeur, par exemple une bannière pleine largeur avec col-12.

Planifier une opération

Renseignez une date de début et une date de fin pour qu’une bannière apparaisse et disparaisse seule. C’est le bon outil pour préparer les soldes, le Black Friday ou une opération de fin d’année plusieurs semaines à l’avance.

• Date de début seule : la bannière apparaît à cette date et reste ensuite affichée.
• Date de fin seule : la bannière est affichée immédiatement et s’arrête à cette date.
• Les deux dates : la bannière n’est visible que dans cette fenêtre.
• Aucune date : la bannière est permanente.

Couvrir une arborescence entière

L’option Appliquer aux sous-catégories évite de recréer la même bannière dans chaque rayon. Placée sur une catégorie parente, la bannière s’affiche dans cette catégorie et dans toutes ses descendantes.

La résolution s’appuie sur l’arbre imbriqué natif de PrestaShop (colonnes nleft et nright), donc sans requête supplémentaire par page. Si vous déplacez des catégories dans l’arborescence, PrestaShop recalcule ces valeurs et la portée suit automatiquement.

Images et langues

Chaque bannière accepte un visuel et un texte alternatif par langue, ce qui permet d’adapter un message ou un prix selon le marché. Si une langue n’a pas reçu son propre visuel, le module affiche celui de la langue par défaut de la boutique plutôt que de masquer la bannière.

Les dimensions de l’image sont relevées à l’envoi et écrites dans les attributs width et height du HTML, ce qui évite le décalage de mise en page au chargement. Les fichiers sont renommés avec un suffixe aléatoire et stockés dans /img/datafireflycategorybanner/.

Multiboutique

Quand la fonctionnalité multiboutique est active, le formulaire affiche un bloc Association aux boutiques. Une bannière n’apparaît que dans les boutiques cochées, et la liste du back-office ne montre que les bannières visibles dans le contexte de boutique courant.

Si aucune boutique n’est cochée, le module associe la bannière au contexte courant afin de ne jamais créer une bannière orpheline.

Filtres à facettes, tri et pagination

Sur PrestaShop 8 et 9, les filtres à facettes, le tri et la pagination rechargent la liste produit en AJAX sans recharger la page. Le module écoute l’événement updateProductList de PrestaShop, retire les bannières précédentes et les réinsère aux bonnes positions après chaque mise à jour du DOM.

Le CSS et le JavaScript ne sont chargés que sur les pages de catégorie, et uniquement lorsque la catégorie courante possède au moins une bannière active et affichable.

Mise à jour depuis la version 1.0.0

Installez simplement la nouvelle archive par-dessus l’ancienne depuis le gestionnaire de modules. Le script de mise à jour se charge de :

• ajouter les colonnes de portée, de planification et de dimensions d’image ;
• créer la table d’association aux boutiques et y reprendre la boutique d’origine de chaque bannière ;
• déplacer les images existantes de views/img/banners/ vers /img/datafireflycategorybanner/ et relever leurs dimensions ;
• retirer un hook devenu inutile.

Vos bannières, leurs positions et leurs visuels sont conservés.

FAQ et dépannage

La bannière n’apparaît pas sur la page catégorie

Vérifiez dans l’ordre : la bannière est active ; la date du jour est comprise dans la fenêtre de planification ; la catégorie visée est bien celle consultée, ou la portée aux sous-catégories est activée ; la langue affichée dispose d’une image, ou la langue par défaut en possède une ; en multiboutique, la boutique courante est cochée. Videz enfin le cache de PrestaShop.

La bannière apparaît au mauvais endroit

La position compte les produits de la page courante. Si votre listing affiche 12 produits par page, une bannière en position 20 ne s’affichera sur aucune page. Réduisez la valeur ou augmentez le nombre de produits par page.

La bannière casse la mise en page de la grille

Videz le champ Classe CSS pour que la bannière reprenne les classes des cellules produit de votre thème. Si vous souhaitez une bannière pleine largeur, saisissez col-12. Évitez de mélanger des classes de grilles différentes.

La bannière disparaît après un filtre

Le module se réaccroche à l’événement updateProductList. Si votre thème ou un module de filtrage tiers remplace entièrement le conteneur de la liste produit sans déclencher cet événement, la réinsertion ne peut pas avoir lieu. Contactez le support en précisant le thème et le module de filtrage utilisés.

L’image refuse de s’envoyer

Le module accepte les fichiers JPG, PNG, GIF, WebP et SVG jusqu’à 4 Mo. Vérifiez aussi que /img/datafireflycategorybanner/ est accessible en écriture, et que les directives upload_max_filesize et post_max_size de PHP sont supérieures au poids du fichier.

Le lien de la bannière est refusé

Seules les URL commençant par http://, https:// ou par une barre oblique sont acceptées. C’est une protection contre l’injection d’adresses javascript: ou data:.

Que se passe-t-il à la désinstallation ?

Le module supprime ses tables et le dossier /img/datafireflycategorybanner/ avec les visuels qu’il contient. Sauvegardez vos images si vous prévoyez de réinstaller plus tard.