Shopify PR

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

記事内に商品プロモーションを含む場合があります

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を表示する設定

今回は例として、以下の「配送時間指定」を追加し、注文完了画面に表示する場合とします。

[Shopify] 配送時間指定を無料で実装する(Debutテーマ)日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。 ...

以下を先ほどの追加スクリプトに追加し、保存します。

{% 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の値がある場合はそちらも表示されます。

設定後はテスト購入や、注文管理画面からの確認を忘れずに。

以上です!

ABOUT ME
toru
フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。