loadingloadingloadingloadingloadingloadingloadingloading loadingloadingloadingloadingloadingloadingloadingloading

Shopify ではカート属性を使うことで(WP のカスタム項目みたいに)注文情報に独自のテキスト情報を付与することができます(ラッピング: あり など)。

カート画面での JS 操作でけっこう格闘したのでメモしておきます。

カート属性の特徴

  • 注文にカスタムテキスト項目を付与できる
    • 配達日時指定アプリなどが使ってますね(Shopify はデフォルトでは日時指定機能ない… 🥲)
  • 注文管理画面であとから編集できる: 「ラッピングやっぱ要らないです」「配達日変更できますか?」など変更に対応できます

カート属性を追加

var data = {
  attributes: {
    '項目1': '○○○',
    '項目2': '○○○',
    '項目3': ' ' // デフォルトで値が空っぽの属性を作りたいときは空欄にせずスペースなどを入れる
  }
};

<input> を使う方法は?

ちなみにカート属性は <form> 内に <input name="attributes['項目名']"> のようにタグを入れることでも可能ですが、value が空っぽダメ(空欄の項目が登録できない)、特定の環境(アプリ内ブラウザなど)値が入ってても項目が登録されないなど、上手くいかないことが多かったです。
JS を使ってページ読み込み時にすぐ POST しちゃうのが無難かなと思います。

空っぽでよいので登録だけしておきたいとき

前述のように、項目だけ空欄で登録したい場合があると思います。
値を空にすると登録されない/キーが消えてしまうことがあるので、'項目名': ' ' など半角スペース1コなどを使いました。

var data = {
  attributes: {
    '項目3': '変更しました',
    '項目4': '', // ← 登録されない、項目が消える
    '項目5': ' ', // ← 半角スペース
    '項目6': '○○○'
  }
};

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));

window.Shopify.routes.root/en とかマルチ言語用。無くても動作します。必須ではないです。
おまじない程度に。

現在のカート属性を取得

開発ツールの console に打てば出てくるのでデバッグに使えます。

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

// 結果
{'項目1': '○○○', '項目2': '○○○', '項目3': '変更しました', '項目4': '○○○', '項目5': '○○○', '項目6': '○○○' ... }

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