Prestashop (la plateforme ecommerce) utilise de nombreuses requêtes Ajax dans son fonctionnement en Front-Office pour éviter des rechargement inutiles de pages complètes. Par exemple, sur la page récapitulative du panier, il y a une requête dès que l’on change une option : quantités, adresse de livraison, etc…
« Work in progress ! »
Le problème, c’est qu’il n’y a pas d’éléments indiquant qu’une requête est en cours et cela peut être déroutant pour l’utilisateur qui voit les éléments de la page se modifier. Parfois même, il ne voit pas les modifications car celles-ci apparaissent au-dessus ou au-dessous de la zone visible. Bref, il me paraît nécessaire de signaler au visiteur (le client) que le site est en train de « travailler »…
Pour cela, je propose une méthode relativement simple à mettre en place. Le principe : Lorsqu’une requête Ajax est lancée, on ajoute une classe CSS sur la balise <body>
(par exemple « loading ») et lorsque la requête est terminée, on retire cette classe. Ensuite, nous aurons différentes possibilités pour styler notre page en fonction de cette classe CSS (nous en verrons une plus bas).
Pour réaliser cette opération, nous allons utiliser la librairie jQuery qui est déjà chargée nativement et nous allons ajouter les lignes suivantes dans le fichier global.js
de notre thème :
$(document).ajaxStart(function(){
$('body').addClass('loading');
});
$(document).ajaxStop(function(){
$('body').removeClass('loading');
});
A partir de là, on peut styler notre page un peu comme on le veut. L’important est de faire comprendre à l’utilisateur qu’il y a un changement d’état du site.
Allons un peu plus loin…
Nous allons ajouter un élément semi-transparent qui masquera partiellement le site lorsque la classe « loading » sera active. Ajoutons donc dans notre fichier global.js
:
$(document).ready(function(){
$('body').append('');
});
Ensuite, nous allons ajouter le style CSS suivant à la fin du fichier global.css
(ou global.scss
pour ceux utilisent le préprocesseur SASS) :
.overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
.loading .overlay {
opacity: 0.5;
pointer-events: auto;
}
J’ai ajouté également la propriété pointer-events
qui va empêcher l’internaute de cliquer sur d’autres éléments du site durant une requête. Mais, cet ajout est optionnel, à vous de voir !
Voici une petite démonstration du résultat…
Dans les autres solutions de style, il y a aussi l’affichage d’un gif animé ou d’une animation CSS3, l’affiche d’un message de type « actualisation de la page » (dans ce cas, il faudra éventuellement le traduire), … Le choix vous appartient !