js-ajax-cart-processing

A CSS class which is appended to the html tag when there is a Shopify Cart API Ajax request in progress.

How it works

Under the hood Liquid Ajax Cart is keeping the js-ajax-cart-processing CSS class appended to the html tag when the Queue of requests is not empty, which means that Liquid Ajax Cart is currently executing Shopify Cart API Ajax requests until the Queue of requests is empty.

Use case

Use this CSS class to show a loading indicator for an Ajax cart section or make the ajaxified elements, such as a cart item quantity input, or a remove cart item button, look visually disabled.

.my-cart__items {
  opacity: 1;
  transition: opacity .2s;
}

/* Make the cart content look visually disabled while updating */
html.js-ajax-cart-processing .my-cart__items {
  opacity: .7;
}

/* Show a loading indicator */
html.js-ajax-cart-processing .my-cart__items:before {
  content: 'Loading';
  display: block;
}