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

[mwhr126]

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

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

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

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

私が行った作業として、

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

{{ '//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 に以下を記載

{%- 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管理画面の 設定 → チェックアウト → 追加スクリプト に以下を記述

<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管理画面から 設定 → 通知 → 注文の確認　に以下を記述

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

を行いました。

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

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

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

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

【参考サイト】

Shopifyに無料で希望配送日時指定を追加

[Qcoltd]

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

https://qiita.com/yoshimi-yzrh/items/fba847a94afda61202cf#%E5%8F%97%E6%B3%A8%E8%A9%B3%E7%B4%B0%E7%94...

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

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

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

考えられる原因は、

cartの<form>要素の外に、<input>と<select>を設置している、

ということではないかと思います。

もしこれが原因であれば、下記2通りの方法で解決できるはずです。

1. cartの<form>要素の中に、<input>と<select>を設置する

2. <input>と<select>にform属性を追加する

「1」が正道だと思いますが、

配送日時指定の<input>要素や<select>要素を表示する場所を自由に変更したいと思うので、

「2」の方法をご説明します。

しかし、

お使いのテーマや、カスタマイズ状況が分かりませんので、

必ずうまくいくとは言えません。

取り急ぎ、追加したコードの2箇所を下記のように修正してみていただいて、

うまくいけば問題ないですし、

うまくいかないようでしたら、

cartの<form>要素のidを調べて適宜ご変更ください。

(1)

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

↓

<input id="date" type="text" name="attributes[お届け希望日]" value="{{ cart.attributes.date }}"  placeholder="最短で発送" form="cart" />

(2)

<select id="" name="attributes[お届け希望時間]">

↓

<select id="" name="attributes[お届け希望時間]" form="cart">

これを行い、

Shopify管理画面の注文管理の注文詳細画面にて「追加の詳細」が確認できるようになれば、

注文完了画面や注文メールに情報が反映されるようになるはずです。

ご参考まで。

(キュー田辺)

[mwhr126]

 Qcoltd 様

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

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

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

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