New Ajax Cart Library

Evgeniy-M
Excursionist
35 6 7

Hello everyone. I have a question for theme developers.

Since Shopify published the new Sections API, we can use the Bundled Section Rendering to update cart sections.

I created a Javascript library that does all the Javascript job for ajax-cart. So to create an ajax-cart section we just need to mark it with the "data-ajax-cart-section" attribute:

{% comment %} sections/my-cart.liquid {% endcomment %}

<div data-ajax-cart-section >
    {% for item in cart.items %}  
      <a href="{{ item.url }}">{{ item.title }}</a> <br />
      Price: {{ item.final_price | money }} <br />

      Quantity:
      <a href="{{ routes.cart_change_url }}?id={{ item.key }}&quantity={{ item.quantity | minus: 1 }}" 
      > Minus one </a>
      <input type="number" value="{{ item.quantity }}" data-ajax-cart-quantity-input="{{ item.key }}" />
      <a href="{{ routes.cart_change_url }}?id={{ item.key }}&quantity={{ item.quantity | plus: 1 }}" 
      > Plus one </a> <br />

      Total: <strong>{{ item.final_line_price | money }}</strong> <br /> <br />  
    {% endfor %}
  
    <a href="/checkout"> Checkout — {{ cart.total_price | money_with_currency }} </button>
</div>

{% schema %} { "name": "My Cart" } {% endschema %}

The library will update the section without reloading a page every time when a user submits a product form or clicks "Minus" and "Plus" buttons.

So the question: is this library is viable, would you like to use it within your projects?

Or maybe you have suggestions about new features etc.

I would love to have a feedback for you guys.

The library docs — https://liquid-ajax-cart.js.org 

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.
Replies 0 (0)