どうも！Shopifyおじさんです！
今回は、Shopifyの購入完了ページ、いわゆるサンクスページと呼ばれる場所にcart.attributesの値や、その他の情報が出せないか？を色々調べてみました！
まずは、基本編ということで解説していきたいと思います。
記入する場所
そもそもどこにコードを書いたらいいのか？
こちらは、テーマファイル内にコードを書くのではなく、ショップの管理画面の設定からコードを読み込ませていきます。
画面左下にある、設定 ＞ チェックアウト ＞ 注文状況ページ ＞ 追加スクリプト （下の画像のところ）にコード書き込んでいきます。
基本文法
いくつか公式でも、説明してあります。（以下リンク）
・注文状況ページをカスタマイズする
・注文状況JavaScriptアセット
公式の内容では、checkoutとshopオブジェクトが使用可能だと書いてありましたが、私がやった中ではorderオブジェクトは呼び出すことができました。
逆に、formとcaptureは使えませんでした…。HTMLは使えるので、<form>はできましたが…。この辺は、別の機会で書いていこうと思います。
基本文法
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'ここに内容を書いていく',
',で区切ると、コンテンツが分けられる',
`コンテンツをひとまとめにしたければ、`を使って<br>
改行していく`
)
</script>
・Shopify.Checkout.OrderStatus.addContentBox('')の中に内容を書いていく
・「,」で区切ると、コンテンツが分けられる
・コンテンツをひとまとめにしたい時は、「`」を使って<br>などで改行していく
・表示エリアを追加したい時は、Shopify.Checkout.OrderStatus.addContentBox('')を追加する。
・文法上どこか間違えていると表示されない
・Liquidのコード部分が間違えていると、設定を保存できない
（あくまで、個人でやっている中で気付いたことです）
cart.attributes以外で表示できるもの
サンプルで作成してみました！
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'タイトル',
{%- comment -%} cart.attributesがあれば {%- endcomment -%}
{% if attributes %}
{% if attributes['配送日の指定'] == "指定する" %}
`<p>希望配送日時は</p>
<p>{{ attributes['配送希望日'] | date: "%Y年%m月%d日" }}の{{ attributes['配送時間帯'] }}です。</p>
`,
{% endif %}
{% endif %}
{%- comment -%} 入会への案内 {%- endcomment -%}
`
<b>入会特典！1000円クーポンプレゼント中！</b><br>
<a href="/account/register">会員登録はこちら</a>
`
)
</script>
上記のコードを入力すると、以下の画像のような内容になります。
※カートページでcart.attributesを設定する必要があります。詳しくはこちら
（order.customer_urlは使えたが、会員の判定をする必要がある）
まとめ
今回は基本的な表示ができるところまでを紹介しました。
Shopify.Checkout.OrderStatus.addContentBox('')内でcustomrの判定はできたのですが、有効化されていない顧客も、顧客と判定してしまうため、その辺の分岐も作れるとレパートリーがもっと増えそうだなと思いました！
通常のjsを使っているので、<script></script>タグ内で別のコンテンツを作成し、モーダルなんかで表示できれば面白いなと思いました。
そのあたりは別の機会で紹介していこうと思います。
あと、
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp