【liquid】【Javascript】店舗受け取りと配送受け取りの2種類の日時指定をカート画面で行いたい。

[ななし]

【実現したいこと】

カート画面にて、ラジオボタンで冷凍配送か店舗受け取りを選択。選択により、別の内容の日付指定用datetimepickerと時間指定用プルダウンメニューを表示したい。

【環境】

使用テーマはstudioです。

delivery-dateというliquidファイルを作成し、そこにliquidとjavascriptで日時指定用の部品を記述。

main-cart-footer.liquid(カート画面のliquidファイル)の該当部分にrenderで挿入しています。

delivery-dateのコードは以下の通りです。

{{ '//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>

<form>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="店頭受け取り" onclick="formSwitch()" checked required>
        <label class="form-check-label"> 店頭受け取り</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="maker" value="冷凍配送" onclick="formSwitch()" required>
        <label class="form-check-label"> 冷凍配送</label>
    </div>
</form>

  <div id="pick-up">
    <p class="cart-attribute__field">
      <label for="date">受け取り希望日:</label>
      <input id="date" type="text" name="attributes[受け取り希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" />
    <br>
      <label>受け取り希望時間帯:</label>
      <select id="" name="attributes[受け取り希望時間]">
        <option value="10:00～10:30"{% if cart.attributes["受け取り希望時間"] == "10:00～10:30" %} selected{% endif %}>10:00～10:30</option>
        <option value="10:30～11:00"{% if cart.attributes["受け取り希望時間"] == "10:30～11:00" %} selected{% endif %}>10:30～11:00</option>
        <option value="11:00～11:30"{% if cart.attributes["受け取り希望時間"] == "11:00～11:30" %} selected{% endif %}>11:00～11:30</option>
        <option value="11:30～12:00"{% if cart.attributes["受け取り希望時間"] == "11:30～12:00" %} selected{% endif %}>11:30～12:00</option>
        <option value="12:00～12:30"{% if cart.attributes["受け取り希望時間"] == "12:00～12:30" %} selected{% endif %}>12:00～12:30</option>
        <option value="12:30～13:00"{% if cart.attributes["受け取り希望時間"] == "12:30～13:00" %} selected{% endif %}>12:30～13:00</option>
        <option value="13:00～13:30"{% if cart.attributes["受け取り希望時間"] == "13:00～13:30" %} selected{% endif %}>13:00～13:30</option>
        <option value="13:30～14:00"{% if cart.attributes["受け取り希望時間"] == "13:30～14:00" %} selected{% endif %}>13:30～14:00</option>
        <option value="14:00～14:30"{% if cart.attributes["受け取り希望時間"] == "14:00～14:30" %} selected{% endif %}>14:00～14:30</option>
        <option value="14:30～15:00"{% if cart.attributes["受け取り希望時間"] == "14:30～15:00" %} selected{% endif %}>14:30～15:00</option>
        <option value="15:00～15:30"{% if cart.attributes["受け取り希望時間"] == "15:00～15:30" %} selected{% endif %}>15:00～15:30</option>
        <option value="15:30～16:00"{% if cart.attributes["受け取り希望時間"] == "15:30～16:00" %} selected{% endif %}>15:30～16:00</option>
        <option value="16:00～16:30"{% if cart.attributes["受け取り希望時間"] == "16:00～16:30" %} selected{% endif %}>16:00～16:30</option>
        <option value="16:30～17:00"{% if cart.attributes["受け取り希望時間"] == "16:30～17:00" %} selected{% endif %}>16:30～17:00</option>
        <option value="17:00～17:30"{% if cart.attributes["受け取り希望時間"] == "17:00～17:30" %} selected{% endif %}>17:00～17:30</option>
        <option value="17:30～18:00"{% if cart.attributes["受け取り希望時間"] == "17:30～18:00" %} selected{% endif %}>17:30～18:00</option>
        <option value="18:00～18:30"{% if cart.attributes["受け取り希望時間"] == "18:00～18:30" %} selected{% endif %}>18:00～18:30</option>
        <option value="18:30～19:00"{% if cart.attributes["受け取り希望時間"] == "18:30～19:00" %} selected{% endif %}>18:30～19:00</option>
        <option value="19:00～19:30"{% if cart.attributes["受け取り希望時間"] == "19:00～19:30" %} selected{% endif %}>19:00～19:30</option>
        <option value="19:30～20:00"{% if cart.attributes["受け取り希望時間"] == "19:30～20:00" %} selected{% endif %}>19:30～20:00</option>
       </select>
      </p>
    </div>


    <div id="delivery">
      <p class="cart-attribute__field">
        <label for="date2">お届け希望日:</label>
        <input id="date2" type="text" name="attributes[お届け希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" />
      <br>
       <label>お届け希望時間帯:</label>
       <select id="" name="attributes[お届け希望時間]">
        <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>
    </div>
<script>
	  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        $(function() {
          $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
          
          $("#date").datepicker({
          minDate: +3,
          maxDate: '+1M',
          showButtonPanel: true
        });
          $("#date2").datepicker({
          minDate: +5,
          maxDate: '+1M',
          showButtonPanel: true
        });
      });
    }
    
  }	  

      function formSwitch() {
        hoge = document.getElementsByName('maker')
        if (hoge[0].checked) {
            // 冷凍配送が選択されたら下記を実行します
            document.getElementById('pick-up').style.display = "";
            document.getElementById('delivery').style.display = "none";
        } else if (hoge[1].checked) {
            // 店舗受け取りが選択されたら下記を実行します
            document.getElementById('pick-up').style.display = "none";
            document.getElementById('delivery').style.display = "";
        } else {
            document.getElementById('pick-up').style.display = "none";
            document.getElementById('delivery').style.display = "none";
        }
    }
    window.addEventListener('load', formSwitch());
</script>

【問題】

上記画像の希望日を選択をクリックした際、datetimepickerの日付選択タイルが表示されるときとされないときがあります。

javascript、liquidともに全く学習していないため、ネットで調べつつ、勘で書いています。

おそらくjavasriptの書き方に問題があるとは思うのですが原因、また、書き方がわかりません。

一から学習して書くのにも時間がかかるのでご教授いただきたいです。

[Qcoltd]

@ななし 様

掲載いただいているコードを一部抜粋しテストしてみたのですが、

エラーがある、というわけではないようでした。

少し気になるのは、window.onloadを使用されている点です。

こちらのサイト様の記事をご覧いただきたいのですが、

https://webukatu.com/wordpress/blog/26991/#onload-4

window.onloadは複数回使用できません。

もしかしたら、掲載いただいたコード以外の箇所に、window.onloadがあるのかもしれません。

下記のように変更されると良いかもしれません。

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

 ↓

	  window.addEventListener('load', function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        $(function() {
          $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
          
          $("#date").datepicker({
          minDate: +3,
          maxDate: '+1M',
          showButtonPanel: true
        });
          $("#date2").datepicker({
          minDate: +5,
          maxDate: '+1M',
          showButtonPanel: true
        });
      });
    }
    
  });

うまくいくかは分かりませんが、

参考になる部分あれば幸甚です。

(キュー田辺) 

[ななし]

ご提案いただいたコードに変更してみましたが、改善しませんでした。

googlechromeで質問の問題が発生しているのですが、edgeで試してみたところ問題なくdatetimepikerのタイルが表示されました。

正直私も原因がよくわかりません。onloadはコード内に複数はありませんでした。

ご回答ありがとうございます。

[Qcoltd · Accepted solution]

@ななし 様

承知いたしました。

もし、よろしければ、プライベートメッセージで、実際に問題が起きているURLをお送りいただけるともう少し何かわかるかもしれません。
(解決のお約束はできませんが。)

(キュー田辺)

[ななし]

Qcoltd様に開発中サイトを見ていただいたところ、原因はjqueryのasync属性でした。

ご参考までに。

[CapitalCastle]

こんにちは。回答ではなくて恐縮ですが、弊社の開発している「CC 配送日時指定」でも同様の機能を実現できます。ご検討いただけましたら幸いです。

https://apps.shopify.com/scheduled-delivery-time-lite?locale=ja