純 JavaScript 日期選擇器僅在 Shopify 購物車頁面中顯示一次日歷，再也不會顯示

Question

為了通過我們的 Shopify 商店實現更高的性能，我們決定盡量減少在整個網站上使用 jQuery。 在 cartpage 中，我添加了一個純 JavaScript 日期選擇器，它有時只顯示一次日歷，之后再也不會顯示。 我確保只有一個版本的 jQuery 在主題中加載，認為來自其他 Shopify 應用程序的多個實例可能會導致此問題。 但即使現在在主題中加載了一個 jQuery 實例，問題仍然存在。 我沒有看到任何控制台錯誤。 請將產品添加到購物車並將 go 添加到購物車頁面以通過單擊日期選擇器查看此問題。 以下是預覽主題的鏈接。

以下是 pickaday 插件的日期選擇器代碼。

<div class="cart-attribute__field">
  <p>
    <label for="ship_date">Ordering early? Pick a future ship date here:</label>
    <input id="ship_date" type="text" name="attributes[ship_date]" value="{{ cart.attributes.ship_date }}" />
  </p>
</div>
<p class="shipping-text">If you are placing an order with <b>a future ship date</b> that <u>also</u> includes multiple addresses please email <a href="mailto:support@packedwithpurpose.gifts" target="_blank">support@packedwithpurpose.gifts</a> upon placing your order to confirm your preferred ship date.</p>
<!-- Added 11162020 -->
<p class="shipping-text">Please note that specifying a date above ensures your gift is packaged and shipped on that date. <b>This is not a delivery date.</b> As we work with third party shipping agencies, your delivery date is subject to the specific carrier selected as well as your shipping destination. Please find our estimated shipping transit times for all regions of the US <strong><a href="https://packedwithpurpose.gifts/shipping-returns/" target="_blank" style="text-decoration: underline;">here</a></strong>.</p>

<script type="text/javascript">
(function() {
  var disabledDays = ["2022-12-23","2022-12-24","2022-12-25","2022-12-30","2022-12-31","2023-1-1"];
  var minDate = new Date();
  var maxDate = new Date();
  maxDate.setDate((maxDate.getDate()) + 60);
  minDaysToShip = 2;        // Default minimum days
  if (minDate.getDay() == 5) {
    // Friday. Set min day to Tuesday. 4 days from now.
  minDaysToShip = 4;
  } else if (minDate.getDay() == 6) {
    // Saturday. Set min day to Tuesday. 3 days from now.
    minDaysToShip = 3;
  }
  minDate.setDate(minDate.getDate() + minDaysToShip);
  var picker = new Pikaday(
  {
      field: document.getElementById('ship_date'),
      format: 'MM/DD/YYYY',
      disableWeekends: 'true',
      toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = ("0" + date.getDate()).slice(-2);
        // Get two digit month ("0" + (this.getMonth() + 1)).slice(-2)
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const year = date.getFullYear();
        return `${month}/${day}/${year}`;
      },
      parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
      },
      firstDay: 0,
      minDate: minDate,
      maxDate: maxDate,
      disableDayFn: function(inputDate) {
        // Disable national holidays
        var formattedDate = inputDate.getFullYear() + '-' + (inputDate.getMonth() + 1) + '-' + inputDate.getDate();
        return ((disabledDays.indexOf(formattedDate) == -1) ? false : true);
      }
  });
})();
</script>

Answer 1

這是通過將(function()替換為window.addEventListener("load", function()