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

2021年9月4日

今回紹介するのはカート操作に必要不可欠なShopify Cart APIの紹介とその具体的な使用方法です！

Shopify Cart APIはカートページでの操作には必須と言って良いほど重要で良く使うAPIです。種類としては

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

の5種類が存在しています。使用するにはjqueryの読み込みが必須なので、そこだけ事前にご準備を！（jqueryは theme.liquid に埋め込むのが一般的です。）

カート内情報を取得できる『cart.js』

まず最初にcart内の情報を取得できる cart.js の紹介です。コードはこのような形で記述できます。

$.ajax({
type: 'GET',
url: '/cart.js',
cache: false,
dataType: 'json'
})
.then(
// 通信成功時
function (cart) {
// ここで処理したい内容を書く
console.log("cart.js 読み込み成功");
},
// 通信失敗時
function () {
console.log("cart.js 読み込み失敗");
}
);

「cart.js」は、カート内の情報を取得するだけなので、具体的にカート内商品の変更などはできません。

このresponseとして下記のようなjsonが取得できます。

{
"token": "dwougoudw869286jkbsd",
"note": null,
"attributes": {},
"total_price": 0,
"total_weight": 0,
"item_count": 0,
"items": [],
"requires_shipping": false,
"currency": "CAD"
}

上記はカート内に商品が存在していなかった場合です。もしカート内に商品が存在していた場合は"items"の配列内に、それぞれの商品情報が入っている状態になります。

// ここで処理したい内容を書く

の部分で"cart.items"としたら、itemsの配列を取得することができますし、"cart.note"としたらカートのメモ部分を取得することが可能です。

使い所としては、

カート内の情報を取得したいとき
カート内の情報をもとに再度add.jsなどでカートに商品を追加するとき

などに使用します。

「add.js」を使用してカートに商品を追加する

カートに商品を新規追加するときは「add.js」を使用します。

他のCart APIが既存商品に対して変更を加えるのに対し、add.jsのみが新規商品をカートに追加することができるShopify Cart APIです。

コードは下記のようになります。

$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
items: [
// ここに追加する商品を記載
{
quantity:1,
id: 123456789,
properties: {
"lineitem property": "test property"
}
}
]
},
dataType: 'json',
success: function() {
console.log("add.js 読み込み成功")
},
error: function() {
console.log("add.js 読み込み失敗")
}
});

という形で「ここに追加する商品を記載」という部分にカートに追加したい商品を追記します。

ちなみに追加する際に

quantity → 追加したい数量
id → variant.id
properties → 追加したい lineitem.properties（任意）

が具体的に記載する内容になります。

add.jsの良いところは、複数商品を一気に追加できるので、items配列の中に同じ形式で複数商品情報を記載すると、一度の処理で複数商品をカートに追加することが可能です。

「update.js」でカート内情報を更新する

基本的には、cart.noteやcart.attributesの更新に使います。カート内商品の更新にも使えないことはないですが、異なるlineitem.propertiesを持つ、同一variant.id商品を区別できないので、商品個数の調整は非推奨です。

コードは下記のような形になります。

$.ajax({
type: 'POST',
url: '/cart/update.js',
data: {
// ここでupdateしたいデータ記載
note: "cart.noteの更新"
},
dataType: 'json',
success: function() {
console.log("update.js 読み込み失敗")
},
error: function(XMLHttpRequest, textStatus) {
console.log("update.js 読み込み失敗")
}
});

「ここでupdateしたいデータ記載」の場所に更新したいデータを渡せば、カート内データを更新することができます。

今回はcart.noteの更新でしたが、cart.attribute更新の際は

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

のような形でdataを定義すると更新可能になります。

「change.js」で既存商品の値を変更する

次にカートに入っている商品の値や内容を変更したい場合に使用するのがchange.jsになります。一度の処理に対して、１商品しか更新することができないのが不便だなぁと感じつつも、使用頻度としては高めなShopify Cart APIになっています。

基本的には

lineitem.propertiesの変更
lineitemの個数変更

に使用します。

具体的なコードは下記です。

$.ajax({
type: 'POST',
url: '/cart/change.js',
// ここでchangeしたいデータ記載
data: {
"id": 123456789,
"quantity": 4
},
dataType: 'json',
success: function() {
console.log("change.js 読み込み失敗")
},
error: function(XMLHttpRequest, textStatus) {
console.log("change.js 読み込み失敗")
}
});

idが123456789の商品を個数4に変更するという処理ですね。

"id"の部分に関しては

lineitem.key
variant.id

のどちらを使用しても良いので、カート内に同一variant.id商品が複数あっても対応できる仕様になっています。

lineitem.propertiesに関しては、設定すると既存lineitem.propertiesを全消去して上書きする形になるのでご注意ください。

カート内商品を全消去する「clear.js」

最後にカート内商品を全消去するという、なかなか仕様しないShopifyのCart API「clear.js」についてです。

ECサイトにおいて、せっかくお客さんがカートに追加した商品を全て消去するというのは愚の骨頂です。なので、ほとんどの場合使用することはありませんが、稀に全消去→add.jsで追加するなど特殊な場面に出くわすこともあります。

具体的なコードは下記のようになっています。

$.ajax({
type: "POST",
url: '/cart/clear.js',
data: '',
dataType: 'json',
success: function() {
console.log("clear.js 読み込み成功")
},
error: function(XMLHttpRequest, textStatus) {
console.log("clear.js 読み込み失敗")
}
});

特に設定は必要なく、上記ajaxを使用してカート内商品を全消去という形になります。