Habilitación de la barra de progreso en nuevas páginas de la tienda de ejemplo Aurora

La barra de progreso aparece cuando se desencadena una solicitud AJAX y desaparece cuando una solicitud finaliza. Sirve de indicador de confirmación de la página, donde el cliente todavía puede realizar acciones adicionales. Es decir, no impide que el cliente realice acciones adicionales en la página.

La barra de progreso es una imagen GIF animada incorporada en un diálogo Dijit, que hereda las propiedades y funciones de Dijit, y se define en el archivo crs-web > WebContent > storedir > Common > ProgressBar.jspf. Su posición predeterminada es el centro en la pantalla. La barra de progreso, sin embargo, puede configurarse para que aparezca al lado del elemento que ha desencadenado la solicitud. Por ejemplo, un botón o un enlace.

Puede configurarse para que aparezca con retardo y contribuir así a evitar la oscilación de las imágenes cuando Las solicitudes se completan rápidamente. La implementación del retardo requiere la doble pulsación para asegurarse de que la barra de progreso se muestra correctamente durante Las solicitudes. Si se elimina el retardo, no es necesaria la doble pulsación.

Por qué y cuándo se efectúa esta tarea

La barra de progreso se habilita automáticamente en la tienda de ejemplo predeterminada en las páginas que se benefician del bloqueo de varias peticiones, tales como, añadir artículos al carro de la compra o completar un pedido al final del proceso de paso por caja.

Procedimiento

Incluya el archivo ProgressBar.jspf en la etiqueta del cuerpo.
Por ejemplo:
```
<%@ include file="ProgressBar.jspf"%>
```
Inserte una llamada a la función cursor_wait() antes de enviar una petición. De esta manera se muestra la barra de progreso cuando se desencadena una petición.
Por ejemplo:
```
cursor_wait();
wcService.invoke("OrderItemAddressShipMethodUpdate", params);
```
Inserte una llamada a la función cursor_clear() después de recibir el estado de una solicitud. De esta manera se oculta la barra de progreso cuando la petición finaliza.
Por ejemplo:
```
,successHandler: function(serviceResponse) {
   cursor_clear();
}
,failureHandler: function(serviceResponse) {
   cursor_clear();
}
```
Opcional: Inserte una llamada a la función submitRequest() para implementar la doble pulsación cuando se utilice el retardo antes de mostrar la barra de progreso.
Por ejemplo:
```
if(!submitRequest()){
   return;
}
cursor_wait();
```
Opcional: Gracias a los pasos anteriores, la barra de progreso puede mostrarse en el centro de la página cuando se envía una solicitud, y se oculta cuando se recibe una solicitud. Para colocar la barra de progreso junto al elemento desencadenante, especifique el ID del elemento mediante la función setCurrentId('ID') antes de invocar la función que contiene la llamada cursor_wait().
Por ejemplo:
```
<a id = "shippingBillingPageNext" href="JavaScript:setCurrentId('shippingBillingPageNext');
CheckoutPayments.deleteExistingPIAndCheckout('PaymentForm');" class="dark_button">
```
Nota: La colocación de la barra de progreso junto al elemento desencadenante solo es posible cuando dicho elemento se muestra en la página. Por ejemplo, cuando la petición desencadena una renovación de la página, no debe utilizarse la función de colocación de la barra de progreso. Cuando no se ha especificado el ID de un elemento, se utilizará la posición centrada, que es el valor predeterminado.