An attribute which keeps the scroll position of an element unchanged
when the parent data-ajax-cart-section container is re-rendered.
When you have a scrollable area inside a data-ajax-cart-section container,
the scroll position of them will be reset to top every time when the data-ajax-cart-section container is re-rendered.
It happens because the HTML of a data-ajax-cart-section container is completely replaced with a new one during re-rendering.
In order to prevent the scroll reset, Liquid Ajax Cart remembers scroll positions of the data-ajax-cart-section-scroll elements
and restores them after the HTML of the parent data-ajax-cart-section container is replaced.
Add the data-ajax-cart-section-scroll attribute to a scrollable element so that Liquid Ajax Cart keeps the scroll position unchanged.
<div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
<div class="my-cart__items" data-ajax-cart-section-scroll>
<!-- Scrollable area for cart items -->
</div>
<form id="my-ajax-cart-form" action="{{ routes.cart_url }}" method="post">
<button type="submit" name="checkout">
Checkout — {{ cart.total_price | money_with_currency }}
</button>
</form>
</div>
{% schema %} { "name": "My Ajax cart" } {% endschema %}Add the data-ajax-cart-section-scroll attribute with unique names to scrollable elements so that Liquid Ajax Cart can distinguish them after re-rendering.
<div class="my-cart" data-ajax-cart-section>
<h2>Cart</h2>
<div class="my-cart__items" data-ajax-cart-section-scroll="main">
{% for item in cart.items %}
<div class="line-item" data-ajax-cart-section-scroll="{{ item.key }}">
<!-- Despite it sounds crazy, lets imagine that each line-item container is scrollable.
Thus it needs the data-ajax-cart-section-scroll attribute with a unique name -->
</div>
{% endfor %}
</div>
<form id="my-ajax-cart-form" action="{{ routes.cart_url }}" method="post">
<button type="submit" name="checkout">
Checkout — {{ cart.total_price | money_with_currency }}
</button>
</form>
</div>
{% schema %} { "name": "My Ajax cart" } {% endschema %}