[Shopify] 注文完了画面をカスタマイズしてCart attributesを表示する方法

Shopifyのカート画面をカスタマイズして配送日時指定などの独自の入力項目、Cart attributes を追加する場合がありますが、その際にお客様が選択または入力した値を注文完了画面に表示したい そんな場合のカスタマイズ方法をまとめます。

Shopifyの無料体験をはじめる

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の値がある場合はそちらも表示されます。 設定後はテスト購入や、注文管理画面からの確認を忘れずに。 以上です！

Shopifyの無料体験をはじめる