Cart.js
Cart.js is a Javascript library that makes it easy to add dynamic cart features to Shopify themes.
It abstracts away the difficult parts of working with Shopify's AJAX API and provides a simple, consistent interface to manipulating a customer's cart. Without having to worry about the quirks in Shopify's endpoints or about making all of your requests synchronous, you can just write code like this:
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.');
}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!