Lazy Loading

[abdullah-shah-5]

Hey there I want to ask how can we apply lazy loading the add to cart button when the http status is 102 ?

[EvgeniyMukhamedjanov]

Hey @abdullah-shah-5 , I'm not sure I understood the issue correctly. Few questions to clarify;

• http status 102 of a Cart API request? Do you mean when it is in process?
• What do you mean by "lazy loading the add to cart button"?

[abdullah-shah-5]

yes it does mean that the request is in process

and while it is processing, I want to show a lazy loading animation (spinner loading) on the add to cart button.

I apologize that I was unclear the first time

[EvgeniyMukhamedjanov]

Got it. You can use the js-ajax-cart-form-in-progress CSS class for it. Once a user clicks on an "Add to cart" button that is within a product form — Liquid Ajax Cart attaches the js-ajax-cart-form-in-progress CSS class to the form.

So lets say, you have a product form with a spinner inside the "Add to cart" button:

{% form 'product', product, class: 'product-form' %}
  <!-- form content -->

  <button type="submit" name="add">
    <span class="product-form__spinner"></span>
    <span>Add to Cart</span>
  </button>
{% endform %}

/* Hide the spinner by default */
.product-form__spinner {
  opacity: 0;
}

/* Show the spinner if the js-ajax-cart-form-in-progress class is attached to the product form */
.product-form.js-ajax-cart-form-in-progress .product-form__spinner {
  opacity: 1;
}

The above code is just an example, so you will need to write your own CSS according to class names of your forms and spinners.

The "add to cart" spinners on the Liquid Ajax Cart demo site are created in the same way

[EvgeniyMukhamedjanov]

Since the topic is rather a question than an issue, I'm going to convert it to a discussion.