Ajax cart

Steps to include Ajax cart in your theme

STEP 1:

1. Create snippets for following file and name it as follow.

1. ajax-cart-template.liquid
2. timber-cart.liquid

2. Create assest for following file and name it as below.

1. handlebars.min.js
2. ajax-cart.js.liquid

3. Now copy the code for respective files.

1. Ajax-cart-template.liquid

<script id="CartTemplate" type="text/template">

{% raw %}
    <form action="/cart" method="post" novalidate class="cart ajaxcart">
      <div class="ajaxcart__inner">
        {{#items}}
        <div class="ajaxcart__product">
          <div class="ajaxcart row" data-line="{{line}}">

              <div class="grid__item one-quarter no-padding">
                <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt=""></a>
              </div>
              <div class="grid__item three-quarters ajaxcart-right">
                <p class="ajax-rtinnerleft">
                  <a href="{{url}}" class="ajaxcart__product-name">{{name}}</a>
                  {% endraw %}{% raw %}
                </p>
                <p class="ajax-rtinnerright">{{{price}}}</p>

                <div class="grid__item one-whole no-padding">

                    <div class="ajaxcart__qty">
                        <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus quantity-increment" data-id="{{id}}" data-line="{{line}}" data-qty="{{itemAdd}}">
                        <span>+</span>
                      </button>
                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">

                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus quantity-increment" data-id="{{id}}" data-qty="{{itemMinus}}" data-line="{{line}}">
                        <span>−</span>
                      </button>
                    </div>
                    <div class="ajaxremove">
                     <a href="/cart/change?line={{line}}&quantity=0" class="ajaxifyCartremove" data-line="{{line}}">Remove</a>
                   </div>
                  </div>

              </div>

          </div>
        </div>
        {{/items}}

        {% endraw %}{% raw %}
      </div>
      <div class="ajaxcart__footer row">

          <div class="ajaxsubtext">
            <p><strong>{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</strong></p>
          </div>
          <div class="ajaxsubtotal">
            <p class="text-right">{{{totalPrice}}}</p>
          </div>

       <div class="cartview"><a href="/cart">View Cart</a></div>

      </div>
    </form>
{% endraw %}
</script>
<script id="AjaxQty" type="text/template">
{% raw %}
    <div class="ajaxcart__qty">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text">−</span>
      </button>
      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
      </button>
    </div>
{% endraw %}
</script>
<script id="JsQty" type="text/template">
{% raw %}
    <div class="js-qty">
      <button type="button" class="js-qty__adjust js-qty__adjust--minus quantity-increment" data-id="{{id}}" data-qty="{{itemMinus}}">
        <span>−</span>
      </button>
      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <button type="button" class="js-qty__adjust js-qty__adjust--plus quantity-increment" data-id="{{id}}" data-qty="{{itemAdd}}">
        <span>+</span>
      </button>
    </div>
{% endraw %}
</script>

2. timber-cart.liquid

3. handlebars.min.js

Click here to view the code

4. ajax-cart.js.liquid

Click here to view the code

4. After it include the files and below code in theme.liquid. Include the code below befor closing the </body>.

5. Check The screen-shots below to include the files in theme.liquid.

6. Include the css in theme.css file or the basic css file of your theme

Click here to view css file code

7. Include the following script to show the popup on click of addtocart button and cartcount button .

Include the below script in theme.liquid file.

while copying the code below change ".site-header__cart.site-headright-mg" this class

with your cart count class in header.

$('.site-header__cart.site-headright-mg').click(function(e){
    ajaxCart.load();
$('body').toggleClass("iscartpopup");
    e.preventDefault();
});
$('.close-cart').click(function(e){
   $('body').toggleClass("iscartpopup");
});

</script>

Include the below script in product.liquid or product-template.liquid file.

while copying the code below change ".product-form__cart-submit" this class

with your cartbutton class in product file.

$('.product-form__cart-submit').click(function(){
$('body').toggleClass("iscartpopup");
});

</script>

DEMO

NOTE
Ignore it if you are using debut theme

This work fine with Debut theme you need not to change anything.

But if you are using any other theme then you have to pay attention to theme moneyformat. You can find it in theme.js or basic js file of your theme.

Adrian Andrași
Adrian Balogh
Adrian Ispas
Adrian Stan
Alex Pană
Alex Ungureanu
Alexandra Tîrnoveanu
Alexandra-Cristina Szücs
Alexandru Fătu
Alexandru Mahu