Cart attributesの内容がチェックアウト完了ページに反映されない場合がある

[ナギサネ]

配送希望日と配送希望時間帯を選択できるように、下記内容で設定をしました。

注文管理ページや注文確認メールなどでは問題なくCart attributesの内容が表示されるのですが、チェックアウトの完了画面のみ表示される場合とされない場合があります。

検証を行ったところ、配送時間指定のみ選択されている場合は正常に表示され、配送日を指定した場合は表示されていないようです。

どうやったらチェックアウトページにも正しく表示されるようになるか、わかる方がいらっしゃいましたら教えてください。

よろしくお願いいたします。

↓Cart-templateに追記したcart attributesの内容

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

<div class="delivery-option">

<div class="txt">配送日時のご希望がある場合はご入力ください。</div>

<div class="delivery-date">
<label for="date">配送希望日</label>
<input id="date" type="text" name="attributes[配送希望日]" value="{{ cart.attributes.date }}" placeholder="最短配達希望" />
<span>※休業日などによりご希望のお日にちにお届けが出来かねる場合がございます。予めご了承くださいませ。</span>
</div>

<div class="delivery-time">
<label>配送希望時間</label>
<select id="time" name="attributes[配送希望時間]" value="{{ cart.attributes.time }}">
<option value="指定なし"{% if cart.attributes["配送希望時間"] == "指定なし" %} selected{% endif %}>時間指定なし</option>
<option value="午前中"{% if cart.attributes["配送希望時間"] == "午前中" %} selected{% endif %}>午前中</option>
<option value="12:00-14:00"{% if cart.attributes["配送希望時間"] == "12:00-14:00" %} selected{% endif %}>12:00-14:00</option>
<option value="14:00-16:00"{% if cart.attributes["配送希望時間"] == "14:00-16:00" %} selected{% endif %}>14:00-16:00</option>
<option value="16:00-18:00"{% if cart.attributes["配送希望時間"] == "16:00-18:00" %} selected{% endif %}>16:00-18:00</option>
<option value="18:00-20:00"{% if cart.attributes["配送希望時間"] == "18:00-20:00" %} selected{% endif %}>18:00-20:00</option>
<option value="19:00-21:00"{% if cart.attributes["配送希望時間"] == "19:00-21:00" %} selected{% endif %}>19:00-21:00</option>
</select>
</div>
</div>

↓チェックアウト追加スクリプトに記載した内容

{% if attributes %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
{% for attribute in attributes %}
'<h2>{{ attribute | first }}</h2>',
'<p>{{ attribute | last }}</p>'
{% endfor %}
)
</script>
{% endif %}

[Jizo_Inagaki · Accepted solution]

value属性などフォーム自体にいくつか妙に思える点はありますが、とりあえず以下のようにShopify.Checkout.OrderStatus.addContentBox()自体をforで複数回出力すれば表示はできると思います。

{% if attributes %}
{% for attribute in attributes %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>{{ attribute | first }}</h2>',
'<p>{{ attribute | last }}</p>'
)
</script>
{% endfor %}
{% endif %}

またはforを使うのではなく、個別に指定する以下の形でも可能です。
(※以下のサンプルコードは値がない時の対応を施していないので未完成です)

{% if attributes %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>配送希望日</h2>',
'<p>{{ attributes["配送希望日"] }}</p>',
'<h2>配送希望時間</h2>',
'<p>{{ attributes["配送希望時間"] }}</p>'
)
</script>
{% endif %}

[ナギサネ]

ありがとうございます！

教えていただいたコードで無事解決致しました。

この度は本当にありがとうございました！