data-ajax-cart-static-element
If you want to have an immutable HTML element within a data-ajax-cart-section container — add the data-ajax-cart-static-element attribute to this element. HTML of the immutable element will not be replaced when its section gets updated.
Liquid Ajax Cart remembers all data-ajax-cart-static-element nodes before updating a data-ajax-cart-section container, then updates the data-ajax-cart-section container and then puts the saved data-ajax-cart-static-element nodes to their places back.
It is useful if you use third-party apps or JavaScript libraries that generates its own HTML and put it within a container in your Shopify Ajax cart. So you don’t want to lose this changes during another data-ajax-cart-section container’s HTML update.
{% comment %} sections/my-cart.liquid {% endcomment %}
<div class="my-cart" data-ajax-cart-section>
<div class="my-cart__header">Cart</div>
<div class="my-cart__items" >
<!-- Cart items -->
</div>
<div class="my-cart__app-container" data-ajax-cart-static-element>
<!-- Container with HTML code generated by an app
and it must not be updated -->
</div>
<div class="my-cart__footer">
<!-- Footer content -->
</div>
</div>
{% schema %} { "name": "My Cart" } {% endschema %}
If you have few data-ajax-cart-static-element elements — give them different names:
{% comment %} sections/my-cart.liquid {% endcomment %}
<div class="my-cart" data-ajax-cart-section>
<div class="my-cart__header">Cart</div>
<div class="my-cart__app-container-1" data-ajax-cart-static-element="app-1">
<!-- Container with HTML code generated by an app
and it must not be updated -->
</div>
<div class="my-cart__items" >
<!-- cart items -->
</div>
<div class="my-cart__app-container-2" data-ajax-cart-static-element="app-2">
<!-- Container with HTML code generated by an app
and it must not be updated -->
</div>
<div class="my-cart__footer">
<!-- Footer content -->
</div>
</div>
{% schema %} { "name": "My Cart" } {% endschema %}