Enabling the progress bar in new Aurora sample store pages

The progress bar is displayed when an AJAX request is triggered and removed when the request completes. It serves as a confirmation indicator on the page, where additional actions can still be performed by the customer. That is, it does not impede the customer from performing additional actions on the page.

The progress bar is an animated GIF image that is embedded in a Dijit Dialog, inheriting the Dijit properties and functions, and is defined in the crs-web > WebContent > storedir > Common > ProgressBar.jspf file. Its default position is centered on the screen. The progress bar, however, can be configured to display next to the element that triggered the request. For example, a button or link.

Its delay can be configured to help avoid flickering images where requests are quickly completed. Implementing the delay requires double-click handling to ensure the progress bar is displayed correctly during requests. If the delay is removed, however, double-click handling is not necessary.

About this task

The progress bar is automatically enabled in the default sample store on pages that benefit from blocking multiple requests, such as adding items to the shopping cart or completing an order at the end of the checkout process.

Procedure

Include the ProgressBar.jspf file within the body tag.
For example:
```
<%@ include file="ProgressBar.jspf"%>
```
Insert a call to the cursor_wait() function before you send the request. This displays the progress bar when a request is triggered.
For example:
```
cursor_wait();
wcService.invoke("OrderItemAddressShipMethodUpdate", params);
```
Insert a call to the cursor_clear() function after you receive the status of the request. This hides the progress bar when the request completes.
For example:
```
,successHandler: function(serviceResponse) {
   cursor_clear();
}
,failureHandler: function(serviceResponse) {
   cursor_clear();
}
```
Optional: Insert a call to the submitRequest() function to implement double-click handling when using a delay before displaying the progress bar.
For example:
```
if(!submitRequest()){
   return;
}
cursor_wait();
```
Optional: The preceding steps enable the progress bar to display in the center of the page when the request is sent, and hide when the request is received. To position the progress bar next to the triggering element, specify the element ID by using the setCurrentId('ID') function before you invoke the function that contains the cursor_wait() call.
For example:
```
<a id = "shippingBillingPageNext" href="JavaScript:setCurrentId('shippingBillingPageNext');
CheckoutPayments.deleteExistingPIAndCheckout('PaymentForm');" class="dark_button">
```
Note: Positioning the progress bar next to the triggering element is only possible when the element is displayed on the page. For example, where the request triggers a page refresh, progress bar positioning must not be used. Its default centered position is used when an element ID is not specified.