PromoBar – Bandeau d’annonce personnalisable pour PrestaShop

PromoBar – Bandeau d’annonce personnalisable pour PrestaShop

PromoBar est un module PrestaShop pensé pour afficher un bandeau d’annonce élégant et efficace en haut de votre boutique. Communiquez vos promotions, événements et informations clés avec un affichage sobre, multilingue, personnalisable et respectueux des bonnes pratiques d’accessibilité.

Depuis le back-office, activez/désactivez le bandeau, choisissez sa position, planifiez la période d’affichage (date de début/fin), personnalisez les couleurs et la police, ajoutez un compte à rebours (si une date de fin est définie), et proposez un bouton d’action menant à la page de votre choix. Le tout sans dépendances externes, pour une intégration légère, sécurisée et performante.

Pourquoi choisir PromoBar ?

En e-commerce, la visibilité compte. Un bandeau d’annonce clair et discret améliore la découverte de vos offres sans interrompre la navigation (contrairement aux popups intrusives). PromoBar attire l’attention au bon moment et reste aligné sur votre charte : message concis, options visuelles maîtrisées, et bouton “fermer” pour ne pas sursolliciter vos visiteurs.

Fonctionnalités principales

• Activation / désactivation du bandeau depuis le back-office.
• Position d’affichage : après l’ouverture de (recommandé) ou displayTop.
• Message multilingue avec mini-markup sécurisé : **gras**, [texte](https://url), retours à la ligne, autolien d’URL.
• Planification par dates : date de début et/ou de fin (optionnelles).
• Compte à rebours (optionnel) — s’active si une date de fin est définie, s’arrête automatiquement à l’échéance.
• Bouton d’action : activable, texte multilingue, URL (http/https), couleurs (fond, texte, bordure).
• Bouton “fermer” avec durée de cookie configurable : 1, 3, 7, 15, 30, 90, 365 jours.
• Personnalisation visuelle : couleur de fond, couleur du texte, police via whitelist locale (aucune ressource externe).
• Animations de texte : Aucune, Défilement horizontal (marquee), Pulsation douce, Clignotement léger.
• Accessibilité : respecte la préférence système “mouvements réduits”.
• Sans dépendances externes (JS/CSS embarqués, polices non chargées en externe).

Compatibilité

• PrestaShop 1.7.x → 9.x
• Thèmes modernes (intégration non intrusive, hooks standards)
• Compatible avec Creative Elements (Elementor pour PrestaShop)
• PHP : testé de 7.4 à 8.3

Remarque : le module n’ajoute aucune dépendance externe et s’intègre dans les hooks fournis sans modification du thème.

Personnalisation & apparence

• Couleurs : fond et texte du bandeau + styles du bouton (fond, texte, bordure).
• Police : sélection dans une liste blanche locale (whitelist). Aucune police externe chargée.
• Animations :
  • Aucune (statique)
  • Défilement horizontal (type “marquee”)
  • Pulsation douce
  • Clignotement léger
• Accessibilité : si l’utilisateur a activé “réduire les animations”, PromoBar diminue automatiquement les effets.

Message & mini-markup

Le contenu du message supporte un mini-markup sécurisé pour un rendu expressif et accessible :

• **gras** → gras
• [texte](https://votre-url) → lien cliquable

Le rendu est sanitisé côté serveur, afin d’éviter toute injection et de ne produire qu’un HTML minimal et sûr.

Dates & compte à rebours

• Date de début (optionnelle) : le bandeau s’affiche à partir de cette date.
• Date de fin (optionnelle) : arrêt automatique à l’échéance.
• Compte à rebours : affichage d’un timer simple et lisible lorsque la date de fin est renseignée.

Bouton “fermer” et durée de cookie

Pour une expérience plus confortable, l’utilisateur peut masquer le bandeau via un bouton “fermer”. La durée de mémorisation est réglable :

• 1 jour
• 3 jours
• 7 jours
• 15 jours
• 30 jours
• 90 jours
• 365 jours

Installation

1. Téléchargez le fichier promobar.zip.
2. Dans votre back-office PrestaShop : Modules > Gestionnaire de modules > Téléverser un module, puis importez le ZIP.
3. Installez le module et ouvrez la page de configuration “PromoBar”.

Important : le dossier racine dans le ZIP doit s’appeler promobar/, conformément au nom technique du module ($this->name='promobar').

Configuration (pas à pas)

1. Activer le bandeau et choisir la position (après recommandé, ou displayTop).
2. Saisir le message multilingue (gras, liens, retours à la ligne supportés).
3. Définir les dates : début (optionnel) et fin (optionnelle). Activer le compte à rebours si souhaité.
4. Style : couleurs du bandeau et du texte, police (whitelist), animation du texte.
5. Bouton d’action : activer, renseigner le texte (multilingue), l’URL (http/https), et personnaliser ses couleurs.
6. Bouton “fermer” : activer et régler la durée du cookie (1 → 365 jours).
7. Enregistrer. Le bandeau est prêt.

Sécurité & performance

• Aucune ressource externe : pas de scripts ni de polices distantes (meilleures confidentialité, stabilité et vitesse).
• Sanitisation serveur du message → HTML minimal, réduction des risques d’injection.
• CSS/JS compacts, chargés uniquement pour le composant.

Cas d’usage

• Promotions : soldes, ventes flash, code promo.
• Opérations saisonnières : fêtes, Black Friday, rentrée, etc.
• Info logistique : délais d’expédition, fermeture exceptionnelle, changement de transporteur.
• Lancement produit : “Nouveauté dispo”, redirection vers la fiche.
• Message de réassurance : livraison offerte, retours sous X jours, hotline, etc.

Bonnes pratiques de contenu

• Clarté : une idée par message.
• Lisibilité : phrase courte, mots clés en gras.
• Action : bouton avec verbe (“Découvrir”, “Profiter”, “En savoir plus”).
• Temporalité : date de fin + compte à rebours pour marquer l’échéance.
• Accessibilité : animations légères + respect des préférences utilisateur.

FAQ

Le bandeau s’affiche-t-il sur toutes les pages ?

Oui, le bandeau s’intègre via les hooks du thème et reste visible globalement selon la position choisie.

Le compte à rebours fonctionne sans date de fin ?

Non. Le compte à rebours s’active uniquement si une date de fin est définie et s’arrête automatiquement à l’échéance.

Puis-je désactiver les animations ?

Oui, sélectionnez “Aucune”. Le module respecte aussi la préférence système “mouvements réduits”.

Le bouton peut-il être multilingue ?

Oui, le texte du bouton est multilingue et l’URL peut être personnalisée (http/https).

Le module charge-t-il des polices externes ?

Non. PromoBar utilise une whitelist de polices locales et n’importe aucune ressource externe.

Journal des versions

v1.0.0 — Première version stable

• Affichage d’un bandeau d’annonce configurable (message multilingue, mini-markup sécurisé).
• Planification par dates (début/fin) + compte à rebours optionnel.
• Personnalisation visuelle : couleurs, police (whitelist), animations légères.
• Bouton d’action : texte multilingue, URL http/https, couleurs bouton.
• Bouton “fermer” avec durée de cookie (1 → 365 jours).
• Hooks : après(recommandé) et displayTop.
• Intégration légère, aucune dépendance externe, respect accessibilité.

Licence

Distribué sous licence MIT : utilisation, modification et redistribution autorisées avec conservation des crédits.

Auteur & support

BeDOM – Solutions Web
Site : https://bedom.fr/
Support : https://bedom.fr/support
LinkedIn : BeDOM – LinkedIn
Facebook : agencebedom
Instagram : @bedom_web

Donnez de la visibilité à vos messages sans alourdir l’expérience. Installez PromoBar, configurez votre premier bandeau en quelques clics, et mettez en avant l’essentiel sur votre boutique PrestaShop.