Ajaxifies Shopify cart sections and product forms.
Doesn't apply CSS styles — the appearance is up to a developer.
No JavaScript code needed — just plain Liquid.
{% comment %} sections/my-cart.liquid {% endcomment %}
<form action="{{ routes.cart_url }}" method="post" class="my-cart">
<!-- Add the data-ajax-cart-section attribute
to a container that must be re-rendered
when the user's cart gets changed -->
<div data-ajax-cart-section>
<h2>Cart</h2>
<div class="my-cart__items" data-ajax-cart-section-scroll>
{% for item in cart.items %}
{% assign item_index = forloop.index %}
<hr />
<div><a href="{{ item.url }}">{{ item.title }}</a></div>
<div>Price: {{ item.final_price | money }}</div>
<div>
Quantity:
<!-- Use routes.cart_change_url for "Plus", "Minus", "Remove" buttons,
add the data-ajax-cart-request-button attribute to ajaxify them -->
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" >
Minus one
</a>
<!-- Add the data-ajax-cart-quantity-input attribute to quantity input fields -->
<input data-ajax-cart-quantity-input="{{ item_index }}" name="updates[]" value="{{ item.quantity }}" type="number" />
<a data-ajax-cart-request-button
href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}">
Plus one
</a>
</div>
<!-- Place a data-ajax-cart-messages container for error messages -->
<div data-ajax-cart-messages="{{ item.key }}"></div>
<div>Total: <strong>{{ item.final_line_price | money }}</strong></div>
{% endfor %}
</div>
<button type="submit" name="checkout">
Checkout — {{ cart.total_price | money_with_currency }}
</button>
</div>
</form>
{% schema %} { "name": "My Cart" } {% endschema %}{% comment %}
Put this code within <body> tag —
in a place where you want the ajax-cart section to appear
{% endcomment %}
{% section 'my-cart' %}
<script type="application/json" data-ajax-cart-initial-state >{{ cart | json }}</script>
<script type="module">
import '{{ 'liquid-ajax-cart.js' | asset_url }}';
</script>🎉 That's it! Product forms will be ajaxified automatically.
Download the latest version of the liquid-ajax-cart.js from the documentation website.
docsfolder — the documentation website;_srcfolder — the library sources;assets,config,layout,locales,sections,snippets,templatesfolders — the demo store theme sources. The password of the store —liquid-ajax-cart.
![shopify[bot] avatar](https://avatars.githubusercontent.com/in/101950?v=4 "shopify[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent