Adding/Removing Cart Items Using Cart.js and Rivets.js

Question

I'm using cart.js on my Shopify store but can't get the increase/decrease quantity or remove features to work. Everything else is working properly so I'm not sure what I'm doing wrong.

I have the following code added just before the closing </body> tag on theme.liquid .

{{ 'rivets-cart.min.js' | asset_url | script_tag }}

<script type="text/javascript">
    jQuery(function() {
        CartJS.init({{ cart | json }}, {
            "dataAPI": false,
            "requestBodyClass": "loading"
        });
    });
</script>

Below is the code I have in header.liquid ... I've also tested this on product-template.liquid and still get the same results.

<div class="cart-product-wrap" rv-each-item="cart.items">

  <div class="cart-quantity">
    <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | plus 1">+</a>
    <div rv-text="item.quantity"></div>
    <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | minus 1">-</a>
  </div>

  <div class="cart-image"><img rv-src="item.image | productImageSize 'small'" src=""></div>

  <div class="cart-title-price">
    <div class="cart-title" rv-text="item.title"></div>
    <div class="cart-price" rv-html="item.price | money Currency.currentCurrency"></div>
    <div class="cart-remove"><a href="#" rv-data-cart-remove="index | plus 1">Remove</a></div>
  </div>

</div>

I've followed the guide on https://cartjs-dev.myshopify.com/pages/guide and don't see any difference from the working example.

Does anyone have any idea what I'm doing wrong or how I can get this working?

Any help would be greatly appreciated!

Answer 1

In case anyone was wondering, I got this to work by changing the script to...

<script type="text/javascript">
    jQuery(function() {
        CartJS.init({{ cart | json }}, {
        });
    });
</script>