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

解決済
mayu
遊覧客
27 1 1

お世話になります。

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

チェックアウトの追加スクリプトに書いたコードがこちらです。
<script>
{% if transaction.gateway == "Cash on Delivery (COD)" %}
Shopify.Checkout.OrderStatus.addContentBox(
'<p>代金引換料金が別途発生いたします</p>'
)
{% endif %}
</script>

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

0 件の「いいね!」

<script></script>が不要なのではないでしょうか?

0 件の「いいね!」
mayu
遊覧客
27 1 1

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

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

0 件の「いいね!」
mayu
遊覧客
27 1 1

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

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

追加スクリプトに追加したコード
{% if transaction.gateway == "Cash on Delivery (COD)" %}
Shopify.Checkout.OrderStatus.addContentBox(
<p>代金引換料金が別途発生いたします</p>
)
{% else %}
<p>追加スクリプトテスト</p>
{% endif %}

0 件の「いいね!」

成功

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 %}

0 件の「いいね!」
mayu
遊覧客
27 1 1

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

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

test1.png

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

test2.png

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

0 件の「いいね!」
mayu
遊覧客
27 1 1

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

追加スクリプト.png

コンテンツボックス.png

0 件の「いいね!」

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

0 件の「いいね!」

分かりました。

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

スクリーンショット 2021-07-13 14.01.07.png

0 件の「いいね!」
mayu
遊覧客
27 1 1

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

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

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

本当に助かりました!

0 件の「いいね!」