向购物车添加配送日期选择器

您可以在购物车页面上添加一个日历，让客户为其订单指定配送日期。

本页相关信息

在 theme.liquid 中包含 jQuery

为了使此自定义生效，某些模板需要在 theme.liquid 布局文件中添加 jQuery 的脚本标签。如果您使用的是 Shopify 免费模板，则可能需要执行下一步：

在 Layout 目录中，点击 theme.liquid。
在代码中找到 </head> 结束标记。在 </head> 结束标记上方的新行中，粘贴以下代码：

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

点击保存。

创建配送日期代码片段

若要为配送日期选择器创建代码片段，请执行以下操作：

桌面版

在 Shopify 后台中，转到在线商店 > 模板。
找到您要编辑的模板，点击 … 按钮以打开操作菜单，然后点击编辑代码。
在 Snippets 目录中，点击添加新代码片段：
创建代码片段：
将代码片段命名为 delivery-date。
点击创建代码片段。新的代码片段文件将在代码编辑器中打开。
在新的 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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

点击保存。

移动设备

在 Shopify app 中，轻触图标。
在销售渠道部分，轻触在线商店。
轻触管理模板。
找到您要编辑的模板，轻触 … 按钮以打开操作菜单，然后轻触编辑代码。
在 Snippets 目录中，轻触添加新代码片段：
创建代码片段：
将代码片段命名为 delivery-date。
轻触创建代码片段。新的代码片段文件将在代码编辑器中打开。
在新的 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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

轻触保存。

在购物车页面中包含代码片段

若要将配送日期代码片段添加到购物车页面，请执行以下操作：

在 Sections 目录中，点击 main-cart-items.liquid。
在代码中找到 </form> 结束标记。在 </form> 结束标记上方的新行中，粘贴以下代码：

{% render 'delivery-date' %}

点击保存。

现在，您的购物车页面上便有了配送日期输入字段。当您点击文本字段内部时，会出现一个日历：

此自定义中使用的日期选择器是 jQuery UI 库中的一个小组件。