# カート画面での、配送日時の設定について

**URL:** <https://community.shopify.com/t/topic/202463>\
**Category:** 技術的なQ＆A\
**Created:** [March 24, 2023, 9:42am UTC](https://community.shopify.com/t/topic/202463 "2023-03-24T09:42:19Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

**問題の概要:**
カート画面で配送日時の入力フィールドは表示されるが、注文完了画面や注文メールに情報が反映されない状態。

**実装内容:**
- `delivery-date.liquid`にjQuery UIのDatepickerを使用した配送希望日の入力フィールドを作成
- `cart.liquid`に配送日時の表示コードを追加
- Shopify管理画面の設定で配送時間帯の選択肢を追加

**提案された解決策:**
Qcoltd氏から以下の2つの修正方法が提示された:

1. **`<input>`と`<select>`要素をカートの`<form>`要素内に配置する**
2. **`<input>`と`<select>`に`form`属性を追加する**

**診断方法:**
Shopify管理画面の注文詳細画面で「追加の詳細」セクションに配送日時情報が表示されるか確認。表示されない場合、cart attributeが正しく追加できていないことが原因。

**現状:**
mwhr126氏が実装テストを行う予定で、結果は後日報告される見込み。

<div class="post-metadata">

**Author:** ![mwhr126](https://avatars.discourse-cdn.com/v4/letter/m/439d5e/32.png) [@mwhr126](https://community.shopify.com/u/mwhr126)\
**Post date:** [March 24, 2023, 9:42am UTC](https://community.shopify.com/t/topic/202463/1 "2023-03-24T09:42:19Z")

</div>

いつもありがとうございます。

親切な方がみえましたら、ご覧いただきたいのですが、

「カート画面で「配送日時」が表示されるが、注文完了画面や注文メールに情報の反映がされない」

という状態となっており、大変困っております。

私が行った作業として、

① Snnipets/delivery-date.liquid のファイルに、以下を記載。

```auto
{{ '//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="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

<p class="cart-attribute__field">
  <label for="date">お届け希望日:</label>
  <input id="date" type="text" name="attributes[お届け希望日]" value="{{ cart.attributes.date }}" placeholder="最短で発送"/>
</p>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        $(function() {
          $.datepicker.setDefaults( $.datepicker.regional["ja"] );
          $("#date").datepicker({
          minDate: +3,
          maxDate: '+1M',
          showButtonPanel: true
        });
      });
    }
  }
</script>

```

② Templates/cart.liquid に以下を記載

```auto
{%- if request.locale.name == "日本語" -%} {% render 'delivery-date' %} {%- endif -%}

<p class="cart-attribute__field"> <label>お届け希望時間帯:</label> 
<select id="" name="attributes[お届け希望時間]"> 
<option value="指定無し"{% if cart.attributes["お届け希望時間"] == "指定無し" %} selected{% endif %}>指定無し</option> 
<option value="8:00〜12:00"{% if cart.attributes["お届け希望時間"] == "8:00〜12:00" %} selected{% endif %}>8:00〜12:00</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="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> 
<option value="20:00～21:00"{% if cart.attributes["お届け希望時間"] == "20:00～21:00" %} selected{% endif %}>20:00～21:00</option> 
</select> </p> <br>

```

③ Shopify管理画面の **設定 → チェックアウト → 追加スクリプト に以下を記述**

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

```

**Shopify管理画面から 設定 → 通知 → 注文の確認 に以下を記述**

```auto
{% if attributes %}
　　{% for attribute in attributes %}
　　　　<h4>{{ attribute | first }}</h4>
　　　　<p>{{ attribute | last }}</p>
　　{% endfor %}
{% endif %}

```

を行いました。

これらをすると、「注文完了画面、注文完了メール」にも、指定した配送日時が記載されるはずなのですが、

私の力では「カート画面に、配送日時の選択肢だけが表示される」という状態になっております。

 ![スクリーンショット 2023-03-24 183945.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/a/eae0e32abf19cfa3de63d9913aa29b8c0b4a549a.png)

以下、参考にしたサイトを添付いたしましたので、大変恐縮ですがご回答いただけますと幸いです。

お手数おかけしますが、何卒よろしくお願い致します。

**【参考サイト】**

[Shopifyに無料で希望配送日時指定を追加](https://qiita.com/yoshimi-yzrh/items/fba847a94afda61202cf)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [March 29, 2023, 10:54am UTC](https://community.shopify.com/t/topic/202463/2 "2023-03-29T10:54:41Z")

</div>

参考サイトの「受注詳細画面での確認方法」に記載されているように、「追加の詳細」で希望配送日時を確認できますでしょうか？

[https://qiita.com/yoshimi-yzrh/items/fba847a94afda61202cf#%E5%8F%97%E6%B3%A8%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95](https://qiita.com/yoshimi-yzrh/items/fba847a94afda61202cf#%E5%8F%97%E6%B3%A8%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95)

もし、「追加の詳細」が存在しない場合、

cart attributeをうまく追加できていない、

ということになるかと思います。

考えられる原因は、

cartの要素の外に、とを設置している、 ということではないかと思います。 もしこれが原因であれば、下記2通りの方法で解決できるはずです。 cartの要素の中に、とを設置する

- とにform属性を追加する 「1」が正道だと思いますが、 配送日時指定の要素や要素を表示する場所を自由に変更したいと思うので、

---

<div class="post-metadata">

**Author:** ![mwhr126](https://avatars.discourse-cdn.com/v4/letter/m/439d5e/32.png) [@mwhr126](https://community.shopify.com/u/mwhr126)\
**Post date:** [April 13, 2023, 5:25am UTC](https://community.shopify.com/t/topic/202463/3 "2023-04-13T05:25:13Z")

</div>

Qcoltd 様

お返事に気づかず失礼いたしました。

配送希望日時についてご回答いただき誠にありがとございます。

私の方で実装のテストを行い、無事出来ましたら追加でお返事させていただきます。

いつもご回答いただき大変助かります。