data-ajax-cart-static-element

An attribute which lets you have an immutable element inside a data-ajax-cart-section container. HTML of the immutable elements won’t be changed when the parent data-ajax-cart-section container is re-rendered.

Use case

During the re-rendering process, Liquid Ajax Cart replaces all the HTML of a data-ajax-cart-section element with new content. If you have third-party scripts or applications injecting their HTML into the cart section, preserving these modifications during re-rendering is crucial.

How it works

To preserve the content of data-ajax-cart-static-element elements during the re-rendering process Liquid Ajax Cart does the following:

1. remembers all data-ajax-cart-static-element DOM nodes before updating the parent data-ajax-cart-section container;
2. updates the data-ajax-cart-section container HTML;
3. puts the remembered data-ajax-cart-static-element nodes to their places back.

If there are attached event listeners to elements inside a data-ajax-cart-static-element element — they will be kept as well, as Liquid Ajax Cart remembers data-ajax-cart-static-element elements as DOM node objects.

Single immutable element

If you want to have an immutable element inside a data-ajax-cart-section container, add the data-ajax-cart-static-element attribute to this element.

<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 Ajax cart" } {% endschema %}

Multiple immutable elements

If you have a few data-ajax-cart-static-element elements — give them different names so that Liquid Ajax Cart can distinguish them after re-rendering:

<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 Ajax cart" } {% endschema %}