Comment réaliser facilement une notification web (alerte bootstrap et notification push toast)

Une notification web a une efficacité redoutable, et est beaucoup utilisée pour les sites web actuels.

Elle offre beaucoup d’avantages.

Elle peut être utilisée pour promouvoir de nouveaux articles, diffusée des résultats instantanés, prévenir d’une vente flash ou encore prévenir d’un coupon de réduction.

Ses applications sont multiples.

Dans ce tutoriel, vous apprendrez comment réaliser facilement une notification web alerte Bootstrap et une notification push toast Bootstrap.

Réalisation d’une notification web alerte bootstrap

LA SUITE APRÈS CETTE PUBLICITÉ

L’alerte est le composant Bootstrap le plus facile à réaliser.

Elle se réalise en insérant au sein d’une balise div les deux classes :

• .alert, elle attribue les propriétés du composant alert Bootstrap à l’élément div
• .alert-{couleur}, elle définit la couleur de fond et celle du texte.

    <div class="alert alert-primary" role="alert">
		  Alerte avec un fond bleu ciel.
		</div>
		<div class="alert alert-danger" role="alert">
		  Alerte avec un fond rouge.
		</div>
		<div class="alert alert-warning" role="alert">
		  Alerte avec un fond orange.
		</div>
		<div class="alert alert-secondary" role="alert">
		  Alerte avec un fond gris foncé.
		</div>
		<div class="alert alert-light" role="alert">
		  Alerte avec un fond gris clair.
		</div>

Il se peut que vous désiriez introduire un lien dans l’alerte pour envoyer le visiteur sur une page avec plus d’amples explications.

En introduisant votre lien dans l’alerte, il faut lui attribuer la classe .alert-link pour qu’il ait la même couleur que le reste du contenu de l’alerte.

  <div class="alert alert-primary" role="alert">
		  Alerte avec <a href="#" class="alert-link">un lien intégré.</a> 
		</div>

Après apparition de votre alerte sur le site, l’idéal est d’offrir à l’utilisateur la possibilité de la fermer après avoir lu le contenu.

Voici comment s’y prendre.

Au sein de la boîte d’alerte, nous allons introduire un bouton qui incorporer à deux éléments essentiels : la classe .close et l’attribut data-dismiss qui prend pour valeur alert.

<div class="alert alert-primary" role="alert">
		  Alerte avec <a href="#" class="alert-link">un lien intégré.</a> 
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>

Réalisation d’une notification push toast bootstrap

Les notifications push toast Bootstrap sont des composants, qui ont l’apparence des notifications push et qui imitent leur comportement.

2 choses essentielles à savoir avant la réalisation d’une notification toast Bootstrap :

• Le composant toast Bootstrap se masque par défaut
• Il a besoin d’être activé (nous verrons dans la suite comment l’activer).

Le composant toast de Bootstrap se compose de deux parties, l’entête et le corps.

L’entête peut contenir une image, le titre et un petit bouton de fermeture, mais pour notre exemple nous allons introduire que le titre et le bouton de fermeture.

Et le corps, lui présente l’information à livrer au visiteur.

Réalisation du toast Bootstrap.

Le conteneur principal qui regroupe l’entête et le corps intègre la classe .toast, l’entête intègre la classe .toast-header et le corps .toast-body.

Le bouton de fermeture inclus dans l’entête prend la classe close et l’attribut data-dismiss qui a pour valeur toast.

<div class="toast p-3" aria-live="assertive" aria-atomic="true">
		    <div class="toast-header">
		      <strong class="mr-auto">Titre de la notification push toast</strong>
		      <small>5 mins ago</small>
		      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
		        <span aria-hidden="true">×</span>
		      </button>
		    </div>
		    <div class="toast-body">
		      Hello, Je suis une notification push Toast de Bootstrap.
		    </div>
</div>

Si vous actualisez la page, rien ne s’affichera comme stipulé au début de cette section, le composant toast est caché par défaut.

Donc, nous allons ajouter la classe .show au conteneur principal pour pouvoir voir ce que nous avons réalisé.

<div class="toast show p-3" aria-live="assertive" aria-atomic="true">
		    <div class="toast-header">
		      <strong class="mr-auto">Titre de la notification push toast</strong>
		      <small>5 mins ago</small>
		      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
		        <span aria-hidden="true">×</span>
		      </button>
		    </div>
		    <div class="toast-body">
		      Hello, Je suis une notification push Toast de Bootstrap.
		    </div>
</div>

NB: retirer la classe .show, elle nous a permis de voir ce que nous avons réalisé, mais nous n’avons plus besoin pour la suite du tutoriel.

Maintenant, découvrez comment faire afficher la notification web toast grâce au clic d’un bouton.

Nous allons créer le bouton qui permettra d’afficher la notification toast, le bouton doit porter un identifiant.

Pour notre tutoriel, nous attribuerons l’identifiant toastBtn au bouton.

Puis, il nous faut ajouter aussi un identifiant au conteneur principal de la notification toast, nommons cet identifiant idToast.

Ensuite précisons au toast le délai qu’il doit faire avant de disparaitre à l’aide de l’attribut data-delay, auquel nous donnerons la valeur de 5000 (c’est-à-dire qu’il doit faire 5 secondes avant de disparaitre).

<button type="button" class="btn btn-primary m-5" id="ToastBtn">Afficher le Toast</button>
<div id="idToast" class="toast p-3" aria-live="assertive" aria-atomic="true" data-delay="5000">
		    <div class="toast-header">
		      <strong class="mr-auto">Titre de la notification push toast</strong>
		      <small>5 mins ago</small>
		      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
		        <span aria-hidden="true">×</span>
		      </button>
		    </div>
		    <div class="toast-body">
		      Hello, Je suis une notification push Toast de Bootstrap.
		    </div>
</div>

Une fois ce code écrit allez dans votre navigateur puis actualisez la page.

Le bouton est bel et bien présent, mais lors du clic rien ne s’affiche.

C’est normal.

Pour que le toast s’affiche lorsqu’on clique sur le bouton, il nous faut activer le toast.

Nous allons l’activer grâce à un script jquery en nous servant des identifiants du bouton et du toast.

$(document).ready(function(){
		  $("#ToastBtn").click(function(){
		    $('#idToast').toast('show');
		  });
});

Nous allons intégrer ce code au sein d’une balise script juste avant la fermeture de la balise body (</body>).

.....
.....
<script>
			 $(document).ready(function(){
		  $("#ToastBtn").click(function(){
		    $('#idToast').toast('show');
		  });
		});
</script>

Nous venons d’activer le toast.

Cette fois, vous verrez que le toast apparaîtra lorsque vous cliquez sur le bouton.

Autres tutoriels disponibles sur le blog

• Maîtriser facilement le jeu d’affichage avec Bootstrap
• Réaliser simplement une barre de navigation Bootstrap
• Créer un site web facilement en 24 heures
• 3 étapes simples pour maîtriser le système de grille de Bootstrap