https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart

Build a Shopify Ajax-cart without JavaScript coding
https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart

ajax-cart cart ecommerce javascript shopify shopify-cart shopping-cart

Last synced: 14 days ago
JSON representation

Build a Shopify Ajax-cart without JavaScript coding

• Host: GitHub
• URL: https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart
• Owner: EvgeniyMukhamedjanov
• Created: 2021-09-19T23:52:49.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-20T10:01:06.000Z (6 months ago)
• Last Synced: 2024-05-20T17:18:54.270Z (6 months ago)
• Topics: ajax-cart, cart, ecommerce, javascript, shopify, shopify-cart, shopping-cart
• Language: Liquid
• Homepage: https://liquid-ajax-cart.js.org
• Size: 42.9 MB
• Stars: 185
• Watchers: 11
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# 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 %}

  

  

  


    
Cart

    

    


      {% for item in cart.items %}

        {% assign item_index = forloop.index %}

        
  

        
{{ item.title }}

        
Price: {{ item.final_price | money }}


        


          Quantity:


          

          

            

             

              Minus one 

            

          

            

            

            

             

              Plus one 

            

          

        

        

        

        


        
Total: {{ item.final_line_price | money }}



      {% endfor %}

    

    

    

      Checkout — {{ cart.total_price | money_with_currency }}

     

  


{% 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  tag —

  in a place where you want the ajax-cart section to appear

{% endcomment %}

{% section 'my-cart' %}

{{ cart | json }}

  import '{{ 'liquid-ajax-cart.js' | asset_url }}';

```

##### 3. Wrap Shopify product forms in the  custom tag

```html

  {% form 'product', product %}

    

    


  {% endform %}


```

: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`.