Activation de la barre de progression dans les nouvelles pages du modèle de magasin Aurora

La barre de progression apparaît lorsqu'une demande AJAX est déclenchée et disparaît une fois que la demande a abouti. Elle sert d'indicateur de confirmation sur la page et n'empêche pas le client d'exécuter d'autres actions sur la même page. Autrement dit, cela n'empêche pas le client d'effectuer des actions supplémentaires sur la page.

La barre de progression est une image GIF animée incorporée dans une boîte de dialogue Dijit, qui hérite des propriétés et des fonctions de Dijit et est définie dans le fichier crs-web > WebContent > storedir > Common > ProgressBar.jspf. Par défaut, elle est centrée à l'écran. Il est toutefois possible de la configurer pour qu'elle apparaisse à côté de l'élément qui a déclenché la demande. Par exemple, un bouton ou un lien.

Son délai d'entrée en action peut être configuré pour éviter le scintillement de l'image lorsque les demandes sont servies rapidement. L'implémentation du délai requiert la gestion du double clic pour garantir l'affichage correct de la barre de progression pendant l'exécution des demandes. En revanche, si le délai est supprimé, la gestion du double clic n'est pas nécessaire.

Pourquoi et quand exécuter cette tâche

La page de progression est automatiquement activée sur les pages du modèle de magasin par défaut, évitant ainsi l'envoi de demandes multiples telles, que l'ajout d'articles au panier ou l'achèvement d'une commande au terme du processus de paiement.

Procédure

Incluez le fichier ProgressBar.jspf dans la balise body.
Par exemple :
```
<%@ include file="ProgressBar.jspf"%>
```
Insérez un appel de la fonction cursor_wait() avant d'envoyer la demande. Cela fait apparaître la barre de progression lorsqu'une demande est déclenchée.
Par exemple :
```
cursor_wait();
wcService.invoke("OrderItemAddressShipMethodUpdate", params);
```
Insérez un appel de la fonction cursor_clear() après avoir reçu le statut de la requête. Cela fait disparaître la barre de progression lorsque la demande est terminée.
Par exemple :
```
,successHandler: function(serviceResponse) {
   cursor_clear();
}
,failureHandler: function(serviceResponse) {
   cursor_clear();
}
```
Facultatif : Insérez un appel à la fonction submitRequest() pour implémenter la gestion du double clic lorsque l'affichage de la barre de progression est précédé d'un délai.
Par exemple :
```
if(!submitRequest()){
   return;
}
cursor_wait();
```
Facultatif : Dans les étapes précédentes, on conserve la position d'affichage par défaut de la barre de progression, c'est-à-dire au centre de la page. Pour positionner la barre de progression en regard de l'élément déclencheur, spécifiez l'ID d'élément en exécutant la fonction setCurrentId('ID') avant d'appeler la fonction qui contient l'appel cursor_wait().
Par exemple :
```
<a id = "shippingBillingPageNext" href="JavaScript:setCurrentId('shippingBillingPageNext');
CheckoutPayments.deleteExistingPIAndCheckout('PaymentForm');" class="dark_button">
```
Remarque : Le positionnement de la barre de progression à côté de l'élément déclencheur n'est possible que lorsque cet élément est affiché sur la page. Par exemple, lorsque la demande déclenche l'actualisation d'une page, vous ne devez pas utiliser le positionnement de la barre de progression. Sa position centrale par défaut est utilisée dès lors qu'aucun ID d'élément n'est spécifié.