Shopify動的チェックアウトボタンとカート属性 Cart attributes を併用する方法
Shopifyの動的チェックアウトボタンは購入の手間を軽減することができる非常に便利な機能ではありますが、利用時に他機能との互換性に注意する必要があります。以下機能と併用する場合は注意が必要です。
- アプリ
- カートの属性
- 商品管理
- 決済設定
- ボタンテキスト
今回紹介するカート属性（Cart attributes)の場合でも動的チェックアウトボタンで決済すると設定したフィールド値が反映されません。
カート属性（Cart attributes）について
まずはカート属性（Cart attributes）を使った一般的な利用方法について確認したいと思います。
Shopifyにはカート画面で独自の入力項目を拡張できるフィールドが用意されています。
そのフィールドはカート属性（Cart attributes）と呼ばれ、「利用規約のチェックボックス」、「ギフト包装オプション」、「配達日付ピッカーツール」などの値を保持するために利用されます。
以下のようなname属性を記述することで、独自の入力項目を追加できます。
attributes[attribute-name]
たとえば、アレルギーを確認するフィールドを設けるならば以下のような記述になります。
この記述をカートテーマファイル内のformタグ内に挿入することで決済ボタン押下時に値が独自フィールドとして送信されます。
<label>アレルギー</label>
<input type="text" name="attributes[allergies]" value="{{ cart.attributes.allergies }}" />
入力フォームに値を入力し、決済してみると注文確認画面で次のように表示されます。
しかし、同様に動的チェックアウトボタンで決済すると入力した値が受注データに反映されません。
これは動的チェックアウトボタン押下時にフォームの送信が行われないために発生します。
この課題をクリアするにはフォームの値変更時に都度非同期で値を送信しておく必要があります。
カート属性（Cart attributes）値を非同期に更新する方法
次のようなギフト包装オプションを利用した場合を想定し、非同期処理を実装してみます。
カートテーマファイル内のformタグ内に以下記述を追記してみます。
<p class="cart-attribute__field">
<label>ギフト包装オプション</label><br>
<select id="gift-options" name="attributes[ギフト包装オプション]">
<option value="ギフトA"{% if cart.attributes["ギフト包装オプション"] == "ギフトA" %} selected{% endif %}>ギフトA</option>
<option value="ギフトB"{% if cart.attributes["ギフト包装オプション"] == "ギフトB" %} selected{% endif %}>ギフトB</option>
<option value="ギフトC"{% if cart.attributes["ギフト包装オプション"] == "ギフトC" %} selected{% endif %}>ギフトC</option>
</select>
</p>
購入ボタン上部に設置してみると以下のようになります。
次に設置したギフト包装オプションの値を非同期に送信するため update.js を利用します。
POST /cart/update.jsの利用
Shopifyにはカートのアイテム数、メモ、属性値を更新するためのエンドポイント（POST /cart/update.js）が用意されています。このエンドポイントに対して必要な値を送信することでフォーム送信前からカート属性値を都度更新できます。
カート属性値をPOSTする場合は以下のようなキー・バリュー形式でAttributesオブジェクトを送信します。
{
attributes: {
'Gift wrap': 'Yes'
}
}
サンプルとしてfetch APIでPOSTメソッドを実装してみます。
cart-attribute.js をテーマのAssetesフォルダーに作成し、以下内容を記載します。
const selectBox = document.getElementById('gift-options');
function postData() {
const selectedValue = selectBox.value;
const attributes = {
attributes: {
'ギフト包装オプション': selectedValue
}
};
fetch('/cart/update.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(attributes),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
selectBox.addEventListener('change', postData);
theme.liquidのheadタグ内に読み込みを記述します。
{%- if template == 'cart' -%}
<script src="{{ 'cart-attribute.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
以上の作業が完了したら再度カート画面でギフト包装オプションを選択し、動的チェックアウトボタンで決済を行います。注文確認画面で次のように値が反映されていればOKです。
まとめ
カート属性、動的チェックアウトボタンとも非常に便利な機能なのでうまく活用し、ユーザーの利便性を高めていきたいですね。また、以下ジェネレーターを使えば簡単にShopifyのフォーム項目を準備できるのでぜひ活用してみてください。
Discussion