.png)
shopify创建配送日期代码片段步骤
shopify创建分发日期代码片段步骤的核心内容
为配送日期选择器创建代码片段，请执行以下操作：PC：在 Shopify 后台，转到网店>模板。找到要编辑的模板，然后点击操作>编辑代码Snippets目录
shopify创建分发日期代码片段步骤正文
创建配送日期代码片段
为配送日期选择器创建代码片段，请执行以下操作：
PC：
在 Shopify 后台，转到网店>模板。
找到要编辑的模板，然后点击操作>编辑代码。
在Snippets点击在目录中添加新的代码片段。
创建代码片段：
命名代码片段delivery-date。
点击创建代码片段。在代码编辑器中打开新的代码片段文件。
苹果系统：
在 Shopify 后台，转到网店>模板。
找到要编辑的模板，然后点击操作>编辑代码。
在Snippets点击在目录中添加新的代码片段。
创建代码片段：
命名代码片段delivery-date。
点击创建代码片段。在代码编辑器中打开新的代码片段文件。
安卓系统：
在 Shopify 后台，转到网店>模板。
找到要编辑的模板，然后点击操作>编辑代码。
在Snippets点击在目录中添加新的代码片段。
创建代码片段：
命名代码片段delivery-date。
点击创建代码片段。在代码编辑器中打开新的代码片段文件。
在新的delivery-date.liquid在代码片段中粘贴以下代码：
```html {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<divstyle="width:300px;clear:both;"><p><labelfor="date">Pickadeliverydate:</label><inputid="date"type="text"name="attributes[date]"value="{{cart.attributes.date}}"/><spanstyle="display:block">Wedonotdeliverduringtheweek-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'%}点击保存。
您的购物车页面现在将有一个输入字段的配送日期。点击文本字段时，日历将出现：
本自定义设置中使用的日期选择器是jQuery UI 库中的小组件。本博客介绍了如何在日期选择器日历中禁用特定日期。
Shopify商户官网原文详情：
Create a delivery date snippet
To create a snippet for your delivery date picker:
PC：
From your Shopify admin,go toOnline Store>Themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theSnippetsdirectory,clickAdd a new snippet:
Create the snippet:
Name your snippetdelivery-date.
ClickCreate snippet. The new snippet file will open in the code editor.
iPhone：
From your Shopify admin,go toOnline Store>Themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theSnippetsdirectory,clickAdd a new snippet:
Create the snippet:
Name your snippetdelivery-date.
ClickCreate snippet. The new snippet file will open in the code editor.
Android：
From your Shopify admin,go toOnline Store>Themes.
Find the theme you want to edit,and then clickActions>Edit code.
In theSnippetsdirectory,clickAdd a new snippet:
Create the snippet:
Name your snippetdelivery-date.
ClickCreate snippet. The new snippet file will open in the code editor.
In your newdelivery-date.liquidsnippet,paste the following code:
{{'//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'|stylesheet_tag}}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"defer="defer"></script><divstyle="width:300px;clear:both;"><p><labelfor="date">Pickadeliverydate:</label><inputid="date"type="text"name="attributes[date]"value="{{cart.attributes.date}}"/><spanstyle="display:block"class="instructions">Wedonotdeliverduringtheweek-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>ClickSave.
Include the snippet in your cart page
To include the delivery date snippet in your cart page:
In theSectionsdirectory,clickcart-template.liquid. If your theme doesn't have this file,then clickcart.liquidin theTemplatesdirectory.
Findthe closing</form>tag in the code. On a new line above the closing</form>tag,paste the following code:
{%render'delivery-date'%}ClickSave.
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 thejQuery UI library. Thisblog postexplains how to disable specific dates in the date picker calendar.
文章内容来源：Shopify官家官网
