You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shopify购物车页jQuery日期选择器：按星期切换配送时段显示

avatar
云原生阿岚
2026-5-11

嘿，我来帮你搞定这个问题！首先得明确一个核心点：Liquid是服务器端渲染的模板语言，在页面发送到浏览器之前就已经执行完毕了，而JavaScript是在客户端浏览器里运行的——所以你没法直接用JavaScript的输出去触发Liquid生成新的HTML。不过别担心，我们可以换个思路：提前把所有星期对应的配送时段HTML块都写好，然后用JavaScript来控制它们的显示和隐藏就行。

第一步：添加所有星期的配送时段HTML块

先在日期选择器的下方，添加各个星期对应的配送时段容器，初始设置为隐藏（用CSS的display: none），你可以根据实际需求修改每个时段的内容：

<!-- 配送时段容器，初始全部隐藏 -->
<div class="delivery-slots">
  <div class="delivery-slot delivery-slot--monday" style="display: none;">
    <p><strong>周一配送时段：</strong>9:00-12:00，14:00-18:00</p>
  </div>
  <div class="delivery-slot delivery-slot--tuesday" style="display: none;">
    <p><strong>周二配送时段：</strong>8:30-11:30，13:30-17:30</p>
  </div>
  <div class="delivery-slot delivery-slot--wednesday" style="display: none;">
    <p><strong>周三配送时段：</strong>9:00-12:00，14:00-18:00</p>
  </div>
  <div class="delivery-slot delivery-slot--thursday" style="display: none;">
    <p><strong>周四配送时段：</strong>8:30-11:30，13:30-17:30</p>
  </div>
  <div class="delivery-slot delivery-slot--friday" style="display: none;">
    <p><strong>周五配送时段：</strong>9:00-12:00，15:00-19:00</p>
  </div>
  <div class="delivery-slot delivery-slot--saturday" style="display: none;">
    <p><strong>周六配送时段：</strong>10:00-14:00</p>
  </div>
  <!-- 周日你已经禁用了，所以不用加 -->
</div>

第二步：修改jQuery Datepicker代码，添加选中事件和初始化逻辑

接下来，我们需要在日期选择器的代码里添加两个关键逻辑：

  • 当用户选中日期时，检测星期几，显示对应的时段块
  • 页面加载时，如果购物车已经保存了配送日期，自动显示对应的时段

修改后的完整JS代码如下：

window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;
    $(function() {
      // 定义一个函数，根据星期几切换配送时段显示
      function showDeliverySlot(dayOfWeek) {
        // 先隐藏所有时段
        $('.delivery-slot').hide();
        // 根据星期几显示对应的时段
        switch(dayOfWeek) {
          case 1: // 周一（getDay()返回1是周一，默认规则0为周日）
            $('.delivery-slot--monday').show();
            break;
          case 2: // 周二
            $('.delivery-slot--tuesday').show();
            break;
          case 3: // 周三
            $('.delivery-slot--wednesday').show();
            break;
          case 4: // 周四
            $('.delivery-slot--thursday').show();
            break;
          case 5: // 周五
            $('.delivery-slot--friday').show();
            break;
          case 6: // 周六
            $('.delivery-slot--saturday').show();
            break;
        }
      }

      // 初始化日期选择器
      $("#date").datepicker({
        minDate: 0,
        maxDate: '+2M',
        firstDay: 1,
        dateFormat: 'DD, MM d yy',
        dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
        beforeShowDay: function(date) {
          var day = date.getDay();
          var array = ["01-01-2021","12-02-2021","13-02-2021","02-04-2021","01-05-2021","13-05-2021","26-05-2021","20-07-2021","09-08-2021","04-11-2021","25-12-2021"];
          var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
          return [(day != 0) && array.indexOf(string) == -1];
        },
        // 选中日期时触发的事件
        onSelect: function(dateText) {
          // 解析选中的日期，获取星期几
          var selectedDate = $.datepicker.parseDate('DD, MM d yy', dateText);
          var dayOfWeek = selectedDate.getDay();
          // 显示对应的配送时段
          showDeliverySlot(dayOfWeek);
        }
      });

      // 页面加载时，如果购物车已有配送日期，自动显示对应时段
      var savedDate = "{{ cart.attributes.delivery_date }}";
      if (savedDate) {
        try {
          var parsedDate = $.datepicker.parseDate('DD, MM d yy', savedDate);
          var dayOfWeek = parsedDate.getDay();
          showDeliverySlot(dayOfWeek);
        } catch(e) {
          // 如果日期格式不对，就不处理
          console.log('无法解析保存的配送日期');
        }
      }

      $.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "calendar.gif",
        buttonText: "Calendar"
      });
    });
  }
}

关键知识点解释

  • Liquid和JS的关系：Liquid在服务器端生成页面，所以你不能用JS的变量去让Liquid动态生成HTML——所有需要显示的HTML必须提前写好，然后用JS控制显示隐藏。
  • getDay()的注意点：虽然你设置了firstDay: 1（周一作为一周的第一天），但Date.getDay()方法还是遵循默认规则：0是周日，1是周一，以此类推，所以我们的switch判断是对应的。
  • 初始化时的处理：当用户返回购物车页，且之前已经选过日期，我们通过cart.attributes.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>

<div class="datepicker-calendar">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input required class="required" id="date" type="text" name="attributes[Delivery Date]" value="{{ cart.attributes.delivery_date }}" data-error="Please tell us your info.">
    <span style="display:block" class="instructions"> .</span>
  </p>
</div>

<!-- 新增的配送时段容器 -->
<div class="delivery-slots">
  <div class="delivery-slot delivery-slot--monday" style="display: none;">
    <p><strong>Monday Delivery Slots:</strong> 9:00-12:00, 14:00-18:00</p>
  </div>
  <div class="delivery-slot delivery-slot--tuesday" style="display: none;">
    <p><strong>Tuesday Delivery Slots:</strong> 8:30-11:30, 13:30-17:30</p>
  </div>
  <div class="delivery-slot delivery-slot--wednesday" style="display: none;">
    <p><strong>Wednesday Delivery Slots:</strong> 9:00-12:00, 14:00-18:00</p>
  </div>
  <div class="delivery-slot delivery-slot--thursday" style="display: none;">
    <p><strong>Thursday Delivery Slots:</strong> 8:30-11:30, 13:30-17:30</p>
  </div>
  <div class="delivery-slot delivery-slot--friday" style="display: none;">
    <p><strong>Friday Delivery Slots:</strong> 9:00-12:00, 15:00-19:00</p>
  </div>
  <div class="delivery-slot delivery-slot--saturday" style="display: none;">
    <p><strong>Saturday Delivery Slots:</strong> 10:00-14:00</p>
  </div>
</div>

<script>
window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;
    $(function() {
      function showDeliverySlot(dayOfWeek) {
        $('.delivery-slot').hide();
        switch(dayOfWeek) {
          case 1:
            $('.delivery-slot--monday').show();
            break;
          case 2:
            $('.delivery-slot--tuesday').show();
            break;
          case 3:
            $('.delivery-slot--wednesday').show();
            break;
          case 4:
            $('.delivery-slot--thursday').show();
            break;
          case 5:
            $('.delivery-slot--friday').show();
            break;
          case 6:
            $('.delivery-slot--saturday').show();
            break;
        }
      }

      $("#date").datepicker({
        minDate: 0,
        maxDate: '+2M',
        firstDay: 1,
        dateFormat: 'DD, MM d yy',
        dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
        beforeShowDay: function(date) {
          var day = date.getDay();
          var array = ["01-01-2021","12-02-2021","13-02-2021","02-04-2021","01-05-2021","13-05-2021","26-05-2021","20-07-2021","09-08-2021","04-11-2021","25-12-2021"];
          var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
          return [(day != 0) && array.indexOf(string) == -1];
        },
        onSelect: function(dateText) {
          var selectedDate = $.datepicker.parseDate('DD, MM d yy', dateText);
          var dayOfWeek = selectedDate.getDay();
          showDeliverySlot(dayOfWeek);
        }
      });

      var savedDate = "{{ cart.attributes.delivery_date }}";
      if (savedDate) {
        try {
          var parsedDate = $.datepicker.parseDate('DD, MM d yy', savedDate);
          var dayOfWeek = parsedDate.getDay();
          showDeliverySlot(dayOfWeek);
        } catch(e) {
          console.log('Could not parse saved delivery date');
        }
      }

      $.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "calendar.gif",
        buttonText: "Calendar"
      });
    });
  }
}
</script>

内容的提问来源于stack exchange，提问作者Ella SG

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.05.11 08:53:58