KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

liquid-ajax-cart

★ 221 Open GitHub ↗

Build a Shopify Ajax-cart without JavaScript coding

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Build a Shopify Ajax-cart without JavaScript coding :fire:
[![npm](https://img.shields.io/npm/v/liquid-ajax-cart)](https://www.npmjs.com/package/liquid-ajax-cart) ![Shopify OS 2.0](https://img.shields.io/badge/Shopify-OS%202.0-brightgreen) ![Price — GitHub star](https://img.shields.io/badge/Price-GitHub%20star-brightgreen)

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](https://liquid-ajax-cart.js.org/assets/images/readme.gif)

## 3-Step installation

##### 1. Create a theme section for the cart with a `data-ajax-cart-section` container

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

<form action="{{ routes.cart_url }}" method="post" class="my-cart">
  
  
  <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:

<ajax-cart-quantity>
            
            <a data-ajax-cart-quantity-minus
              href="{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}" > 
              Minus one 
            </a>
          
            
            <input data-ajax-cart-quantity-input="{{ item_index }}" name="updates[]" value="{{ item.quantity }}" type="number" />

<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>
        
        
        <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 
```html
{% comment %}
  Put this code within <body> tag —
  in a place where you want the ajax-cart section to appear
{% endcomment %}

{% section 'my-cart' %}

##### 3. Wrap Shopify product forms in the <ajax-cart-product-form> custom tag
```html
<ajax-cart-product-form>
  {% form 'product', product %}

<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](https://liquid-ajax-cart.js.org) website.

## The repository content

* `docs` folder — the [documentation](https://liquid-ajax-cart.js.org) website;
 * `_src` folder — the library sources;
 * `assets`, `config`, `layout`, `locales`, `sections`, `snippets`, `templates` folders — the [demo store](https://liquid-ajax-cart.myshopify.com) theme sources. The password of the store — `liquid-ajax-cart`.

liquid-ajax-cart

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README