Liquid, JavaScript, themes, sales channels
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024