Please announce here

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

Shopify Cart API add update change js

 

今回紹介するのはカート操作に必要不可欠な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になります。一度の処理に対して、1商品しか更新することができないのが不便だなぁと感じつつも、使用頻度としては高めな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を使用してカート内商品を全消去という形になります。

 

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

 

個人的にそれぞれのShopify Cart APIを使う頻度としては

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

のように思います。

ただShopify Cart APIはとても便利で、カート内で商品追加、消去、変更などの操作を行う際は必須のAPIなので、ぜひ活用してみてください。

それでは最後までお読みいただき、ありがとうございました!本日も良い1日を!

 

(参考)Shopify 公式 Cart API ドキュメント 全文英語

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

EC Penguin おすすめ本

Leave a comment

Please note, comments must be approved before they are published