Aller au contenu principal

Announcement Bar

L'addon Announcement Bar permet d'afficher une barre de notification en haut de votre site web pour informer vos utilisateurs des nouveautés, promotions ou alertes importantes.

attention

Cet addon nécessite une version v2.14.9 ou supérieure de ClientXCMS.

Configuration​

Vous pouvez gérer la configuration de l'announcement bar dans Espace d'administration > Paramètres > Personalisations > Bandeau d'annonce

HTML du bandeau : Vous pouvez mettre du HTML dans le champ de texte pour personnaliser le contenu de la barre d'annonce. Début d'affichage : Vous pouvez définir la date et l'heure de début d'affichage de la barre d'annonce. Fin d'affichage : Vous pouvez définir la date et l'heure de fin d'affichage de la barre d'annonce. Activer le bandeau : Vous pouvez activer ou désactiver l'announcement bar.

info

Vérifiez que le thème que vous utilisez supporte l'affichage de l'announcement bar. Certains thèmes personnalisés peuvent ne pas afficher cette fonctionnalité.

Comment supporter l'addon sur un thème ?​

Pour que l'announcement bar s'affiche correctement, votre thème doit inclure le code suivant dans votre fichier layouts/client.blade.php ou layouts/front.blade.php ou équivalent, juste après la balise <body> :

    {!! app('seo')->header() !!}

Exemple d'affichage de l'announcement bar :​

Preview :​

img

Code source :​

<div class="bg-gray-400 backdrop-blur-lg dark:bg-neutral-900/60">
    <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
        <!-- Grid -->
        <div class="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
            <div class="flex items-center gap-x-3 md:gap-x-5">
                <div class="grow">
                    <p class="md:text-xl text-gray-800 font-semibold dark:text-neutral-200">
                        Démarrez dès aujourd'hui. 
                    </p>
                    <p class="text-sm md:text-base text-gray-800 dark:text-neutral-200">
                        Profitez du code promo <span class="font-semibold text-primary">"TEST"</span> pour une remise de 5% sur votre première commande.
                    </p>
                </div>
            </div>
            <div class="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
                <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="/store">
                    Commencer
                </a>
                <a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-gray-800 text-gray-800 hover:border-gray-500 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-white dark:text-white dark:hover:text-neutral-300 dark:hover:border-neutral-300" href="/client/support/submit">
                    Nous contacter
                </a>
            </div>
        </div>
    </div>
</div>

Comment ajouter un bouton de fermeture ?​

Vous pouvez ajouter un bouton de fermeture à l'announcement bar en utilisant le code HTML et JavaScript suivant :

<button  type="button" data-announcement-dismiss><i class="bi bi-x-lg"></i></button>
<!-- or -->
<button type="button" onclick="clientxAnnouncementBarHide()"><i class="bi bi-x-lg"></i></button>