shopify-cartjs

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!

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