Barre d’annonce & Compte à rebours (dfannouncebar)
Installer et configurer la barre d'annonce : rotation de messages, compte à rebours {countdown}, ciblage langue/pays/groupes et planification.
Présentation
Le module dfannouncebar ajoute une barre d’annonce intelligente à votre boutique PrestaShop 8 ou 9 : plusieurs messages en rotation dans la même barre, un compte à rebours en direct, un ciblage par langue, pays et groupe client, une planification par dates et un bouton de fermeture mémorisé par cookie. Trois emplacements sont disponibles : haut de page, haut fixe (sticky) et bas fixe.
Installation
- Dans le back-office, ouvrez Modules → Gestionnaire de modules → Installer un module.
- Envoyez le fichier
dfannouncebar.zippuis cliquez sur Installer. - Cliquez sur Configurer pour ouvrir la page du module.
À l’installation, le module crée une barre d’exemple inactive avec un message multilingue (code HELLO10 et compte à rebours à J+7) : activez-la pour voir immédiatement le rendu, puis adaptez-la ou supprimez-la.
Aucune dépendance : pas de Composer, pas de jQuery. Les fichiers JS et CSS du module ne sont chargés sur le front que si au moins une barre est active.
Configuration générale
La page de configuration contient un réglage global : le hook d’accroche de l’emplacement « haut de page ».
- displayBanner (par défaut) : position standard au-dessus du header sur le thème Classic.
- displayTop : solution de secours si votre thème ne déclare pas displayBanner.
Une garde interne empêche tout double affichage si votre thème exécute les deux hooks. Les emplacements fixes (haut fixe et bas fixe) ne dépendent pas de ce réglage.
Créer une barre
Depuis la page de configuration, cliquez sur Gérer les barres. Chaque barre possède :
- Emplacement : haut de page, haut fixe (suit le défilement) ou bas fixe. Le module compense automatiquement le padding de la page pour les positions fixes.
- Priorité : si plusieurs barres visent le même emplacement, seule celle avec la priorité la plus basse s’affiche.
- Couleurs : fond et texte, appliqués via des variables CSS.
- Rotation : intervalle en secondes entre deux messages. La rotation se met en pause au survol.
- Fermeture : bouton de fermeture optionnel ; la durée de vie du cookie (en heures) détermine quand la barre réapparaît.
- Planification : date de début et date de fin au format AAAA-MM-JJ, complétées automatiquement à 00:00:00 et 23:59:59.
- Boutique : en multiboutique, une barre peut être globale ou limitée à une boutique.
Messages et compte à rebours
Depuis la liste des barres, l’action Messages ouvre les messages de la barre. Chaque message est multilingue et comprend :
- Texte : le contenu affiché. Insérez le placeholder
{countdown}à l’endroit où le chronomètre doit apparaître. - Date d’échéance : la cible du compte à rebours, affiché au format
Xj HH:MM:SSet mis à jour chaque seconde (le libellé des jours est traduisible). - Masquer une fois expiré : le message disparaît automatiquement à l’échéance, côté navigateur et côté serveur (aucun HTML mort n’est servi).
- Bouton d’action : libellé et URL optionnels, affiché en style pilule.
- Ordre : position du message dans la rotation.
Exemple : « Soldes d’été : -20 % avec le code HELLO10 — fin dans {countdown} ». Si tous les messages d’une barre expirent, la barre se retire d’elle-même.
Ciblage
Chaque barre peut être restreinte par :
- Langues : la barre ne s’affiche que pour les langues sélectionnées.
- Pays : basé sur le pays du contexte PrestaShop ; la précision augmente si la géolocalisation IP est activée dans Paramètres internationaux → Localisation.
- Groupes clients : visiteurs, invités, clients ou tout groupe personnalisé (VIP, B2B…).
Un champ laissé vide signifie « tout le monde ». Les trois critères se cumulent.
Dépannage
- La barre ne s’affiche pas en haut de page : votre thème ne déclare probablement pas displayBanner ; passez le hook d’accroche sur displayTop dans la configuration.
- La barre ne s’affiche pas du tout : vérifiez qu’elle est active, que la planification couvre la date du jour, que le ciblage correspond à votre profil de test, et qu’aucune barre de priorité inférieure n’occupe le même emplacement. Pensez aussi au cookie de fermeture : ouvrez une fenêtre de navigation privée.
- Le compte à rebours n’apparaît pas : assurez-vous que le message contient bien
{countdown}et qu’une date d’échéance future est renseignée. - Deux barres apparaissent en haut : le hook d’accroche a peut-être été modifié alors qu’un cache de page servait l’ancienne version ; videz le cache PrestaShop.