Shopifyのカート画面をカスタマイズして配送日時指定などの独自の入力項目、Cart attributes を追加する場合がありますが、その際にお客様が選択または入力した値を注文完了画面に表示したい
そんな場合のカスタマイズ方法をまとめます。
Liquidコードを挿入・編集する際には、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。
ShopifyのCart attributesについて理解する
Cart attributeについて詳細は以下。
Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！ — Shopify パートナー
The order object
今回はすでにCart attributesを追加している前提で、その値を注文完了画面（本当は「注文状況ページ」と言います）に表示するための方法について記載していきます。
Shopifyの注文完了画面のカスタマイズ方法
注文完了ページは、Shopify Plusマーチャント以外はliquidファイルを編集できません。ただし、「追加スクリプト」というものを使用して、JavaScriptを追加することができます。
公式ドキュメントは以下。
注文状況ページをカスタマイズする · Shopify ヘルプセンター
注文状況JavaScriptアセット · Shopify ヘルプセンター
編集は以下から行います。
左下の、設定→チェックアウト→注文処理 の「追加スクリプト」
Shopifyのチェックアウト注文完了画面にCart attributesを表示する設定
今回は例として、以下の「配送時間指定」を追加し、注文完了画面に表示する場合とします。
以下を先ほどの追加スクリプトに追加し、保存します。
{% if attributes %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
{% for attribute in attributes %}
'<h2>{{ attribute | first }}</h2>',
'<p>{{ attribute | last }}</p>'
{% endfor %}
)
</script>
{% endif %}これでCart attributesの値がある場合は以下のように表示されます。
※今回の場合「配送時間指定」のみですが、他にもCart attributesの値がある場合はそちらも表示されます。
設定後はテスト購入や、注文管理画面からの確認を忘れずに。
以上です！
