どうも！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