[Shopify] Cart APIのadd.js, update.js, change.js, clear.jsでカートを完全操作する

In this article, we will introduce the Shopify Cart API, which is essential for cart operations, and show you exactly how to use it!

The Shopify Cart API is a very important and frequently used API that is essential for cart page operations. The types of APIs are

• GET /cart.js
• POST /cart/add.js
• POST /cart/update.js
• POST /cart/change.js
• POST /cart/clear.js

There are five types of "js" in existence. You need to load jquery to use them, so just be prepared for that in advance! (jquery is typically embedded in theme.liquid).

cart.js" to retrieve information in the cart

First of all, we would like to introduce cart.js, which allows you to retrieve information in the cart. The code can be written in this form.

$.ajax({
type: 'GET',
url: '/cart.js',
cache: false,
dataType: 'json'
})
.then(
// on successful communication
function (cart) {
// write what you want here
console.log("cart.js loading Success");
},
// Communication failure
function () {
console.log("cart.js loading failed");
}
);

Since "cart.js" only retrieves information in the cart, it cannot specifically change items in the cart.

You can get the following json as this response.

{ "
token": "dwougoudw869286jkbsd",
"

note": null,

"


attributes": {},


"



total_price": 0,



"




total_weight": 0,




"





item_count": 0,





"






items": [],
"requires_shipping": false, "
currency": "CAD"
}

The above is the case where the product did not exist in the cart. If there were items in the cart, the "items" array would contain information about each item.

// Write what you want to do here

If "cart.items" is used in the "cart.note" section, the items array can be retrieved, and if "cart.notes" is used, the notes section of the cart can be retrieved.

The most common uses are

• When you want to retrieve information in the cart
• When adding items to the cart again using add.js or other methods based on the information in the cart

For example

Adding products to the cart using "add.js

add.js" is used to add a new product to the cart.

While other Cart APIs make changes to existing products, add.js is the only Shopify Cart API that allows you to add new products to your cart.

The code is as follows

$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
items: [
// list items to add here
{
quantity:1,
id: 123456789,
properties: {
"lineitem property": "test property"
}

]
},
dataType: 'json',
success: function() {
console.log("add.js loading succeeded")
},
error: function() {
console.log("add.js loading failed")
}
);

In this case, add the products you want to add to the cart in the "Describe products to be added here" section.

By the way, when adding

• quantity → Quantity to be added
• id → variant.id
• properties → lineitem.properties you want to add (optional)

is the specific content to be described.

The good thing about add.js is that multiple products can be added at once, so if multiple product information is described in the same format in the items array, it is possible to add multiple products to the cart in a single process.

Update information in the cart with "update.js

Basically, it is used to update cart.notes and cart.attributes. It can also be used to update products in the cart, but it is deprecated for adjusting the number of products because it cannot distinguish between same-variant.id products with different lineitem.properties.

The code should look like the following

$.ajax({
type: 'POST',
url: '/cart/update.js',
data: {
// describe data to update here
note: "update cart.note"
},
dataType: 'json',
success: function() {
console.log("update.js loading failed")
},
error: function(XMLHttpRequest, textStatus) {
console.log("update.js loading failed")
}
);

You can update the data in the cart by passing the data you want to update to the "Describe the data you want to update here" location.

In this case, cart.note was updated, but when updating cart.attribute, use

{
attributes: {
'Cart Attribute Key': 'Cart Attribute Value'

}}

The data can be updated by defining the data in the form of

Change the value of an existing product with "change.js

Next, change.js is used to change the value or content of products in the cart. Although it is inconvenient that only one product can be updated at a time, it is used frequently in the Shopify Cart API.

Basically

• Modification of lineitem.properties
• Change the number of lineitem

The following table shows the most common uses for this function.

The specific code is as follows

$.ajax({
type: 'POST',
url: '/cart/change.js',
// describe the data you want to change here

data: {
"id": 123456789,
"quantity": 4
},
dataType: 'json',
success: function() {
console.log("change.js loading failed")
},
error: function(XMLHttpRequest, textStatus) {
console.log("change.js loading failed")
}
});

The process is to change the number of items with id 123456789 to 4.

As for the "id" part

• lineitem.key
• variant.id

can be used, so it can be used even if there are multiple products with the same variant.id in the cart.

Please note that when lineitem.properties is set, the existing lineitem.properties will be completely erased and overwritten.

clear.js" to clear all items in the cart

Finally, let's talk about "clear.js," Shopify's Cart API that is not easily specified, which deletes all products in the cart.

On an e-commerce site, it is a fool's errand to delete all the products that customers have added to their carts. Therefore, it is not used in most cases, but in rare cases, you may encounter a special situation where you need to delete all the products and then add them with add.js.

The specific code is as follows

$.ajax({
type: "POST",
url: '/cart/clear.js',
data: '',
dataType: 'json',
success: function() {
console.log("clear.js loading successful")
},
error: function(XMLHttpRequest, textStatus) {
console.log("clear.js loading failed")
}
);

There is no need to configure anything in particular, and the above ajax will be used to clear all items in the cart.

Complete cart manipulation with add.js, update.js, change.js, and clear.js of [Shopify] Cart API Summary

The frequency with which I personally use each Shopify Cart API is

add.js → change.js → cart.js → update.js → clear.js

I think.

However, the Shopify Cart API is very useful and essential for operations such as adding, deleting, and changing products in the cart, so please take advantage of it.

Well then, thank you for reading to the end! Have a great day!

（Official Shopify Cart API Documentation Full Text

https://shopify.dev/api/ajax/reference/cart