loadingloadingloadingloadingloadingloadingloadingloading loadingloadingloadingloadingloadingloadingloadingloading

Shopify のネイティブ機能としてカート属性(公式: “カートページで顧客から追加情報を収集できるカスタムフォームフィールド”)がありますが、それを Javascript で追加したいときに使うコードです。

カートページで注文情報になんとかして確実にカスタム項目を付与するためにかなり格闘したのでここにメモしておきます。

現在のカート属性データを取得する

fetch('/cart.js')
.then(response => response.json())
.then(data => {
  console.log(data.attributes);
});

オブジェクトで返ってきます

カート属性を追加する

var data = {
  attributes: {
    '項目1': '○○○',
    '項目2': '○○○',
    '項目3': '○○○'
  }
};

fetch(window.Shopify.routes.root + 'cart/update.js', {
  method: 'POST',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => console.log(response))
.catch(error => console.error(error));

同じ項目名の場合のみ上書きします。
なので更新したい項目だけ送信すればよいです:

var addtionalData = {
  attributes: {
    '項目3': '変更しました',
    '項目4': '○○○',
    '項目5': '○○○',
    '項目6': '○○○'
  }
};
// fetch したときの結果
{'項目1': '○○○', '項目2': '○○○', '項目3': '変更しました', '項目4': '○○○', '項目5': '○○○', '項目6': '○○○'}

カート属性は <form> 内に入力項目を作れば付与できますが、value が空っぽ、特定の環境(アプリ内ブラウザなど)での注文など、何かしらの条件で項目自体が追加されないと注文管理で編集すらできないため、そのようなケースが減るよう(ちょっと強引に)付与するときに必要です。

ユーザが自由に変更可能な項目は、イベントリスナー change などで監視して、同じように送信すれば OK です。