Slider et Bannières Page d’Accueil : documentation

Présentation

DF Home Banners affiche une grille de hero complète sur la page d’accueil de votre boutique, composée de cinq zones : un slider principal (plusieurs slides), une bannière latérale haute, une bannière latérale basse, une bannière large gauche et une bannière large droite. Sur desktop, le slider occupe environ 75 % de la largeur avec les deux bannières latérales empilées à sa droite, et les deux bannières larges s’affichent en dessous. Sur mobile, la grille s’empile en une colonne.

Le module est conçu pour la vitesse : conversion WebP à l’upload, préchargement de l’image LCP, lazy loading, attributs de dimensions anti-CLS, 3 Ko de JavaScript vanilla et cache Smarty. Aucune dépendance : ni Composer, ni jQuery.

Installation

1. Dans votre back-office PrestaShop, allez dans Modules > Gestionnaire de modules > Installer un module.
2. Sélectionnez le fichier dfhomebanners.zip téléchargé depuis votre compte DataFirefly.
3. Le module s’installe et crée un onglet DF Home Banners dans le menu Améliorer, ainsi que ses tables et le dossier d’upload des images.

Configuration du module

La page de configuration (Modules > DF Home Banners > Configurer) contient :

• Délai d’autoplay du slider en millisecondes, minimum 2000. Le slider se met en pause au survol, quand l’onglet du navigateur est masqué, et respecte la préférence système prefers-reduced-motion.
• Cinq interrupteurs d’affichage mobile, un par zone. Une zone désactivée est masquée sous 768 px et ses images ne sont jamais téléchargées par le visiteur mobile : elles passent en lazy loading, et une image lazy masquée n’est pas demandée par le navigateur. Si le slider est coupé sur mobile, son préchargement LCP est automatiquement restreint au desktop.

Chaque sauvegarde de la configuration vide le cache du module, l’effet est immédiat en front.

Gérer les bannières

La gestion se fait dans l’onglet DF Home Banners du menu Améliorer. La liste affiche toutes les bannières avec leur zone, leur titre, leurs dates, leur position et leur statut, avec filtres et activation en un clic.

Créer une bannière

Cliquez sur Ajouter et renseignez :

• Zone : le slider principal accepte plusieurs bannières (une par slide) ; chacune des quatre zones fixes affiche la première bannière active, selon l’ordre des positions.
• Image : un champ par langue. Formats acceptés : JPEG, PNG, WebP. L’image est redimensionnée à la largeur maximale de sa zone (1400 px pour le slider, 560 px pour les latérales, 900 px pour les larges) puis convertie en WebP qualité 82, avec conservation d’un fichier de secours JPEG ou PNG. Les dimensions finales sont stockées et injectées en attributs width / height pour éliminer le CLS.
• Image mobile : optionnelle, un champ par langue. Cadrez-la pour le format portrait ; elle est redimensionnée à 768 px, convertie en WebP et servie sous 768 px de viewport via la balise picture. Principalement utile pour les slides du slider.
• Titre / texte alternatif : utilisé comme attribut alt de l’image, par langue.
• URL du lien : par langue, optionnelle.
• Position : ordre d’affichage dans la zone (croissant).

Planifier avec les dates de début et de fin

Les deux champs de dates sont optionnels. Format accepté : AAAA-MM-JJ ou AAAA-MM-JJ HH:MM:SS. Une date de début seule publie la bannière à partir de ce moment ; une date de fin seule la retire à ce moment ; les deux ensemble bornent la campagne. Champs vides : la bannière est affichée en permanence tant qu’elle est active.

Multiboutique et multilingue

En contexte multiboutique, chaque bannière s’associe aux boutiques de votre choix via les cases d’association du formulaire. L’image, l’image mobile, le lien et le texte alternatif se définissent par langue ; une langue sans image reprend simplement rien (la bannière ne s’affiche pas dans cette langue tant qu’aucune image n’est fournie). Le cache est isolé par langue et par boutique.

Performance : ce que fait le module

• LCP : la première slide active du slider est annoncée dans le head par une balise link rel="preload" avec fetchpriority="high". Avec une image mobile, deux balises preload avec attributs media sont émises : chaque appareil ne précharge que sa variante.
• CLS : les attributs width et height sont posés sur chaque image, l’espace est réservé avant le chargement.
• Poids : WebP en sortie, lazy loading sur toutes les images hors LCP, decoding="async" partout.
• JavaScript : environ 3 Ko de vanilla chargés en defer en bas de page. Flèches, points, swipe tactile, autoplay.
• Serveur : rendu en cache Smarty par langue et boutique, une seule requête SQL groupée à la régénération. CSS et JS enregistrés uniquement sur le contrôleur d’accueil.

Dépannage

Les bannières ne s’affichent pas en front

• Vérifiez que la bannière est active, qu’une image est bien uploadée pour la langue consultée, et que la date du jour est dans la plage définie.
• Vérifiez l’association boutique de la bannière en multiboutique.
• Le thème doit exposer le hook displayHome, présent dans tous les thèmes basés sur Classic. Si un module de slider natif occupe déjà la zone (ps_imageslider), désactivez-le pour éviter le doublon visuel.

La conversion WebP ne se fait pas

Votre PHP ne dispose probablement pas de imagewebp. Le module sert alors les fichiers JPEG / PNG d’origine, redimensionnés. Demandez à votre hébergeur d’activer le support WebP de GD.

Une modification n’apparaît pas immédiatement

Sauvegardez n’importe quelle bannière ou la configuration : le cache du module est vidé à chaque écriture. Videz aussi le cache Smarty global de PrestaShop si votre boutique est derrière un cache pleine page (Varnish, LiteSpeed, CDN).

Désinstallation

La désinstallation supprime l’onglet d’administration, les tables du module et ses valeurs de configuration. Les fichiers d’images uploadés restent dans le dossier du module tant que celui-ci n’est pas supprimé du disque.