创建配送日期代码片段
若要为配送日期选择器创建代码片段,请执行以下操作:
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 }}
<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' %}
点击保存。
您的购物车页面中现在将有一个配送日期输入字段。当您点击文本字段时,将出现日历:
此自定义设置中使用的日期选择器是 jQuery UI 库中的小组件。此博客文章介绍如何在日期选择器日历中禁用特定日期。
Shopify商户官网原文详情:
Create a delivery date snippet
To create a snippet for your delivery date picker:
PC:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Snippets directory, click Add a new snippet:
Create the snippet:
Name your snippet
delivery-date
.Click Create snippet. The new snippet file will open in the code editor.
iPhone:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Snippets directory, click Add a new snippet:
Create the snippet:
Name your snippet
delivery-date
.Click Create snippet. The new snippet file will open in the code editor.
Android:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Snippets directory, click Add a new snippet:
Create the snippet:
Name your snippet
delivery-date
.Click Create snippet. The new snippet file will open in the code editor.
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>Click Save.
Include the snippet in your cart page
To include the delivery date snippet in your cart page:
In the Sections directory, click
cart-template.liquid
. If your theme doesn't have this file, then clickcart.liquid
in the Templates directory.Find the closing
</form>
tag in the code. On a new line above the closing</form>
tag, paste the following code:{% render 'delivery-date' %}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商户官方网站