Shopify Cart.js

Shopify Cart.js is a Javascript library for Shopify Theme, and forked from cart.js Since the original package is no longer maintained, and Shopify now have new Shopify Market features, we have created the new Cart.js with Shopify Market/Multilingual Supported.

The basic usage for Cart.js is same as the old Cart.js

function example() {
  // Clear the existing cart.
  CartJS.clear();

  // Add 3x "12345678" items, with a custom "size" property of "XL".
  CartJS.addItem(12345678, 3, {
    "size": "XL"
  });

  // Add multiple items in a single call. 
  CartJS.addItems([
    {
      id: 12345678,
      quantity: 3,
      properties: {
        "size": "XL"
      }
    },
    {
      id: 87654321,
      quantity: 2
    }
  ]);

  // Set a custom cart note.
  CartJS.setNote('This is a custom cart note.');
}

If your store have different url for different languages or currency, you should init Cart.js like this:

<script>
    CartJS.init({{ cart | json }}, { 
        "moneyFormat": "{{ shop.money_format }}",
        "routes": {
            "cart": {{ routes.cart_url | json }},
            "cart_add": {{ routes.cart_add_url | json }},
            "cart_chnage": {{ routes.cart_change_url | json }},
            "cart_update": {{ routes.cart_update_url | json }},
            "cart_clear": {{ routes.cart_clear_url | json }},
        }                                             
    }
</script>

In this case, you cart change/update/add will get the cart total in the correct currency, instead of the shop default currency.

The Original Cart.js Documentation

Neat, huh? But that's just the beginning.

Cart.js bundles two powerful optional modules that make it even easier to build dynamic carts into your themes:

Data API Module

Lets you use simple data-* markup attributes to hook in to Cart.js methods, without having to write any Javascript yourself.

For example, to create a button that added a particular product to your cart, all that's required is:

<button data-cart-add="12345678">Add Product</button>

DOM Binding Module

In combination with Rivets.js, the DOM Binding module lets you write HTML templates in your .liquid files that are re-rendered dynamically when the contents of your cart change, like this:

<div data-cart-view>
    You currently have {cart.item_count} item(s) in your cart, for a total of {cart.total_price | money_with_currency}.
</div>

Getting Started and Documentation

Documentation and examples are available on the home page.

You can check out a list of who's using Cart.js in production on the Built with Cart.js page.

Dependencies

Cart.js currently depends on jQuery for its AJAX helpers, custom event bindings and utility methods. This usually isn't a problem as most Shopify themes ship with jQuery.

Rivets.js is required if you want to use the DOM Binding module. The distribution of Cart.js includes a minified asset (rivets-cart.min.js) which contains both the Cart.js library and a bundled version of Rivets.js.

Release History

Refer to the change log for a full list of changes.

Contributions

Contributions are very much welcome! Read our contribution guidelines for details on submitting pull requests that will be accepted.

---

About the Author

Gavin Ballard is the founder, CEO, and occasional developer at Disco Labs, a Shopify Plus partner agency specialising in solutions for merchants with complex needs.

Thanks

Thanks to the following people who have contributed their time and code to Cart.js!

• Michaël Gallego
• Michael Shannon
• Stewart Knapman
• Jonathan Moore
• Ty Carlson