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
などで監視して、同じように送信する