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

备注

如果您使用的是 Shopify 提供的免费模板，那么您可以联系 Shopify 支持以获取关于此教程的帮助。此教程需要 15 分钟的设计时间。详细了解 Shopify 设计政策。

备注

此自定义设置不适用于 Shopify 经典模板。查看您的模板架构版本。

您可以在购物车页面上包含一个日历，使客户能够指定其订单的配送日期。

注意

警告：此自定义设置不适用于抽屉式或弹窗式购物车，仅适用于购物车页面（位于 URL your-store.com/cart）。如果您使用购物车抽屉或弹窗式购物车，则需要在模板编辑器中将您的购物车更改为页面式。在模板预览中向购物车中添加产品，然后点击模板编辑器中的购物车页面标签来查看您的购物车设置。

在 theme.liquid 中包含 jQuery

若要使此自定义项正常工作，某些模板需要在 theme.liquid 布局文件中添加 jQuery 的脚本标记。若您使用 Shopify 免费模板，则可能需要按照接下来的步骤操作：

1. 在 Layout 目录中，点击 theme.liquid。

2. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

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

1. 点击保存。

创建配送日期代码片段

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

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

3. 在 Snippets 目录中，点击添加新代码片段。

4. 创建代码片段：

   1. 将代码片段命名为 delivery-date。
   2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

5. 在新的 delivery-date.liquid 代码片段中，粘贴以下代码：

1. 点击保存。

iPhone

1. 在 Shopify 应用中，轻触 。

2. 在销售渠道部分，点击在线商店。

3. 点击管理模板。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

5. 在 Snippets 目录中，点击添加新代码片段。

6. 创建代码片段：

   1. 将代码片段命名为 delivery-date。
   2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

7. 在新的 delivery-date.liquid 代码片段中，粘贴以下代码：

1. 点击保存。

Android

1. 在 Shopify 应用中，轻触 。

2. 在销售渠道部分，点击在线商店。

3. 点击管理模板。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

5. 在 Snippets 目录中，点击添加新代码片段。

6. 创建代码片段：

   1. 将代码片段命名为 delivery-date。
   2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

7. 在新的 delivery-date.liquid 代码片段中，粘贴以下代码：

1. 点击保存。

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

若要在购物车页面中包含配送日期代码片段，请执行以下操作：

1. 在 Sections 目录中，点击 main-cart-items.liquid。

2. 查找代码中的结束 </form> 标记。在结束 </form> 标记上方的新行中，粘贴以下代码：

{% render 'delivery-date' %}

1. 点击保存。

您的购物车页面中现在将有一个配送日期输入字段。当您点击文本字段时，将出现日历：

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