liquid-ajax-cart
v2.1.1
Published
Build a Shopify Ajax-cart without JavaScript coding
Downloads
1,644
Maintainers
evgeniy_mukhamedjanovReadme
Build a Shopify Ajax-cart without JavaScript coding :fire:
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.
3-Step installation
1. Create a theme section for the cart with a data-ajax-cart-section container
{% 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:
<!-- Wrap the quantity control in the <ajax-cart-quantity> custom tag -->
<ajax-cart-quantity>
<!-- Add the data-ajax-cart-quantity-minus attribute to the "Minus" button -->
<a data-ajax-cart-quantity-minus
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" />
<!-- Add the data-ajax-cart-quantity-plus attribute to the "Plus" button -->
<a data-ajax-cart-quantity-plus
href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | plus: 1 }}">
Plus one
</a>
</ajax-cart-quantity>
</div>
<!-- Place a data-ajax-cart-errors container for error messages -->
<div data-ajax-cart-errors="{{ 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 %}2. Include the section and the liquid-ajax-cart.js in your theme.liquid
{% 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>3. Wrap Shopify product forms in the custom tag
<ajax-cart-product-form>
{% form 'product', product %}
<!-- form content -->
<div data-ajax-cart-errors="form"></div>
{% endform %}
</ajax-cart-product-form>:tada: That's it!
Download the latest version of the liquid-ajax-cart.js from the documentation website.
The repository content
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.