# 注文状況ページに代引きの時だけメッセージを表示したい

**URL:** <https://community.shopify.com/t/topic/52540>\
**Category:** 技術的なQ＆A\
**Created:** [July 9, 2021, 1:44am UTC](https://community.shopify.com/t/topic/52540 "2021-07-09T01:44:17Z")\
**Posts on this page:** 10\
**Page:** 1

## AI-generated summary

注文状況ページで、代引き時のみ注意メッセージを表示したいという相談。最初に試した `transaction.gateway == "Cash on Delivery (COD)"` の条件分岐では表示されず、`else` 側だけ出ることから、判定対象の指定が誤っていると判明しました。

主な修正点:
・`<script></script>` は不要。
・`transaction` は単一オブジェクトではなく配列として扱う必要があり、`checkout.transactions[0].gateway` または `transactions[0].gateway` を参照する。
・必要に応じて `for` 文で `checkout.transactions` / `transactions` をループして判定する。

その後、コードを修正して `Shopify.Checkout.OrderStatus.addContentBox(...)` 内にメッセージを表示できることを確認。添付画像は、編集画面と実際の表示結果の確認に使われていました。

途中で `endfor` に赤い点線が出る懸念もありましたが、最終的にこれはブラウザの英文スペルチェックであり、コードエラーではないと判明。問題は実質解決済みです。

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 9, 2021, 1:44am UTC](https://community.shopify.com/t/topic/52540/1 "2021-07-09T01:44:17Z")

</div>

お世話になります。

注文状況ページに代引きの時だけメッセージを表示するために、  
こちらのヘルプを参考にしてコードを書いてみたのですが、表示されませんでした。  
（参考）[https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/order-status-javascript-asset](https://help.shopify.com/ja/manual/orders/status-tracking/customize-order-status/order-status-javascript-asset)

チェックアウトの追加スクリプトに書いたコードがこちらです。

どなたかご教授ください！宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [July 10, 2021, 6:53am UTC](https://community.shopify.com/t/topic/52540/2 "2021-07-10T06:53:44Z")

</div>

が不要なのではないでしょうか？

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 11, 2021, 5:35am UTC](https://community.shopify.com/t/topic/52540/3 "2021-07-11T05:35:59Z")

</div>

[_osamu\_iwasaki_](https://community.shopify.com/user/744960)様

返信ありがとうございます。  
お返事が遅くなりまして、申し訳ございません。

を削除しても表示されないのですが、他に考えられることはございますでしょうか？

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 12, 2021, 2:03am UTC](https://community.shopify.com/t/topic/52540/4 "2021-07-12T02:03:13Z")

</div>

を削除し、{% else %}を追加したところ、{% else %}の内容が表示されたので、ifの条件設定を間違えているようです。

代引きの時のみメッセージを表示させる方法が分かる方がいらっしゃいましたら、教えていただけますと幸いです。

追加スクリプトに追加したコード  
{% if transaction.gateway == “Cash on Delivery (COD)” %}  
Shopify.Checkout.OrderStatus.addContentBox(

代金引換料金が別途発生いたします

) {% else %}

追加スクリプトテスト

{% endif %}

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [July 12, 2021, 2:38am UTC](https://community.shopify.com/t/topic/52540/5 "2021-07-12T02:38:48Z")

</div>

transactionオブジェクトが配列になっていたため、0番目指定で単独で出すか、

**{{ checkout.transactions[0].gateway }}**  
**{{ transactions[0].gateway }}**

もしくはfor文で抜き出すと出てきました。

**{% for transaction in checkout.transactions %}**  
**{{ transaction.gateway }}**  
**{% endfor %}**

**{% for transaction in transactions %}**  
**{{ transaction.gateway }}**  
**{% endfor %}**

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 12, 2021, 3:42am UTC](https://community.shopify.com/t/topic/52540/6 "2021-07-12T03:42:30Z")

</div>

[_osamu\_iwasaki_](https://community.shopify.com/user/744960)様

再度返信をいただきまして、ありがとうございます。

教えていただいたコードを元に書いてみました。

 ![test1.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/9/79c9614fee8db27d4c0f95b59c081cd7e80032f1.png)

endforのところに赤い点線が出ているのが気になりましたが、注文状況ページに文章を表示させることができました！  
ありがとうございます！

 ![test2.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/b/ebbb5e045217369ca886fbefaa0dbb39b11a1291.png)

表示させることができたのですが、コード編集初心者のため、これで正しいのか不安なのですが大丈夫でしょうか？

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 12, 2021, 7:11am UTC](https://community.shopify.com/t/topic/52540/7 "2021-07-12T07:11:06Z")

</div>

コードを以下のように修正することで、コンテンツボックス内に文章を表示することが出来ました。  
相変わらずendforに赤い点線が入っているため、不安が残ります。

 ![追加スクリプト.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/9/c9ea24136588483120d62591012bfd73115d8a63.png)

 ![コンテンツボックス.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/e/8eaf1c418384594813ad1fe3bc6c628f702119ef.png)

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [July 13, 2021, 4:55am UTC](https://community.shopify.com/t/topic/52540/8 "2021-07-13T04:55:40Z")

</div>

「 **赤い点線** 」これ今まで気づいてませんでしたが、「 **通知メール** 」のカスタマイズでも出てますね。  
これが何を指し示してるのか分かりませんが、機能してるので無視していいとは思います。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [July 13, 2021, 5:01am UTC](https://community.shopify.com/t/topic/52540/9 "2021-07-13T05:01:58Z")

</div>

分かりました。

ブラウザの **英文自動スペルチェック** でした。これを **オフ** にすると消えます。

 ![スクリーンショット 2021-07-13 14.01.07.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/d/3d0f76df17bb70903cc19ca798bfbda1250782c4.png)

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [July 14, 2021, 1:37am UTC](https://community.shopify.com/t/topic/52540/10 "2021-07-14T01:37:54Z")

</div>

[_osamu\_iwasaki_](https://community.shopify.com/user/744960)様

返信ありがとうございます！

赤い点線はコードエラーで出ているものではなかったのですね。  
安心致しました。

この度は丁寧に対応していただきまして、ありがとうございました。

本当に助かりました！