Cart.js

How to use Cart.js

Cart.js is a Javascript library that provides a simple way to add an Ajax cart functionality to your Shopify theme. Here are the steps to use Cart.js:

1. First, download the Cart.js library and include it in your Shopify theme.

2. After including Cart.js in your theme, you can start using its API to add cart functionality to your website. The API has several methods for adding items to the cart, updating the cart, and removing items from the cart.

3. To add an item to the cart, you can use the

   add()
   method, which takes an object containing the product ID, variant ID, quantity, and any other relevant information. Here is a basic example:

   CartJS.addItem(productId, quantity, {
     image: imageURL,
     name: productName,
     price: productPrice
   });
   

4. You can also update the cart using the

   updateItem()
   method, which takes the line item ID and the updated quantity. Here's an example:

   CartJS.updateItem(lineItemId, newQuantity);
   

5. If you want to remove an item from the cart, you can use the

   removeItem()
   method, which takes the line item ID. Here's an example:

   CartJS.removeItem(lineItemId);
   

6. Finally, you can use the

   getCart()
   method to retrieve the current state of the cart. This method returns an object containing the total number of items in the cart, the total price, and an array of line items. Here's an example:

   var cart = CartJS.getCart();
   console.log(cart.item_count);
   console.log(cart.total_price);
   console.log(cart.items);
   

By following these steps, you can easily add a powerful Ajax cart functionality to your Shopify theme using Cart.js.