shopify创建配送日期代码片段步骤

创建配送日期代码片段

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

PC：

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

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

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

2. 创建代码片段：

1. 将代码片段命名为 delivery-date。

2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

苹果系统：

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

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

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

2. 创建代码片段：

1. 将代码片段命名为 delivery-date。

2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

安卓系统：

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

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

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

2. 创建代码片段：

1. 将代码片段命名为 delivery-date。

2. 点击创建代码片段。新的代码片段文件将在代码编辑器中打开。

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

```html {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

<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"> We do not deliver during the week-end.</span>   </p> </div> <script>   window.onload = function() {       if (window.jQuery) {         let $ = window.jQuery;         $(function() {           $("#date").datepicker({           minDate: +1,           maxDate: '+2M',           beforeShowDay: $.datepicker.noWeekends         });       });     }   } </script>

1. 点击**保存**。 ## 在购物车页面中包含代码片段 若要在购物车页面中包含配送日期代码片段，请执行以下操作： 1. 在 **Sections** 目录中，点击 `cart-template.liquid`。如果您的模板中没有此文件，则点击 **Templates** 目录中的 `cart.liquid`。 2. [查找](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find)代码中的结束 `</form>` 标记。在结束 `</form>` 标记上方的新行中，粘贴以下代码： ```liquid {% render 'delivery-date' %}

1. 点击保存。

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

此自定义设置中使用的日期选择器是 jQuery UI 库中的小组件。此博客文章介绍如何在日期选择器日历中禁用特定日期。

Shopify商户官网原文详情：

Create a delivery date snippet

To create a snippet for your delivery date picker:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet:

2. Create the snippet:

1. Name your snippet delivery-date.

2. Click Create snippet. The new snippet file will open in the code editor.

iPhone：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet:

2. Create the snippet:

1. Name your snippet delivery-date.

2. Click Create snippet. The new snippet file will open in the code editor.

Android：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet:

2. Create the snippet:

1. Name your snippet delivery-date.

2. Click Create snippet. The new snippet file will open in the code editor.

1. In your new delivery-date.liquid snippet, paste the following code:

   {{ '//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 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 week-end.</span>   </p> </div> <script>   window.onload = function() {       if (window.jQuery) {         let $ = window.jQuery;         $(function() {           $("#date").datepicker({           minDate: +1,           maxDate: '+2M',           beforeShowDay: $.datepicker.noWeekends         });       });     }   } </script>

2. Click Save.

Include the snippet in your cart page

To include the delivery date snippet in your cart page:

1. In the Sections directory, click cart-template.liquid. If your theme doesn't have this file, then click cart.liquid in the Templates directory.

2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

   {% render 'delivery-date' %}

3. Click Save.

You now have a delivery date input field on your cart page. When you click inside the text field, a calendar will appear:

The date picker used in this customization is a widget from the jQuery UI library. This blog post explains how to disable specific dates in the date picker calendar.

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

为了方便管理商城的配送日期设置,需要创建代码片段来在多个地方重复使用相同的配送日期逻辑,而不需要每次都重复编写相同的代码。通过代码片段可以 centralized 管理配送日期规则,方便维护。

登录Shopify管理界面->设置->代码和 snippet->新建代码片段,取一个名称,将检查配送日期的逻辑代码填入代码区,然后点击保存。之后就可以在Liquid模板或应用中通过{{ 'delivery_date' |snippet }}来输出该代码片段定义的逻辑了。

代码片段中的Liquid代码可以调用Shopify提供的一些全局对象变量,如商品对象product,当前日期日期today等。也可以定义一些自己的变量和逻辑来计算配送日期。不过代码片段中无法直接操作数据库或将结果返回模板,它只能输出可渲染的HTML代码。

在产品详情页的Liquid模板中插入{{ 'delivery_date' | snippet }}标签就可以输出该代码片段定义的逻辑并显示对应的配送日期了。需要注意代码片段中的当前商品对象应是product,否则逻辑可能不适用。