Skip to content

filipmariania/Shopify-liquid-ajax-cart

Repository files navigation

Build a Shopify Ajax-cart without JavaScript coding 🔥

npm Shopify OS 2.0 Price — GitHub star

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.

Liquid Ajax Cart Video

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>

🎉 That's it!

Download the latest version of the liquid-ajax-cart.js from the documentation website.

The repository content

  • docs folder — the documentation website;
  • _src folder — the library sources;
  • assets, config, layout, locales, sections, snippets, templates folders — the demo store theme sources. The password of the store — liquid-ajax-cart.