久久免费精品国产72精品九九,久久精品熟女亚洲av麻豆

shopify創(chuàng)建配送日期代碼片段步驟

shopify新聞

2022-03-28

1184

若要為配送日期選擇器創(chuàng)建代碼片段，請執(zhí)行以下操作：

創(chuàng)建日期代碼片段

若要為配送日期選擇器創(chuàng)建代碼片段，請執(zhí)行以下操作：

PC：

在后臺(tái)中，轉(zhuǎn)到在線商店 > 模板。
找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

在 Snippets 目錄中，點(diǎn)擊添加新代碼片段。
創(chuàng)建代碼片段：

將代碼片段命名為 delivery-date。
點(diǎn)擊創(chuàng)建代碼片段。新的代碼片段文件將在代碼編輯器中打開。

蘋果系統(tǒng)：

在 Shopify 后臺(tái)中，轉(zhuǎn)到 > 模板。
找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

在 Snippets 目錄中，點(diǎn)擊添加新代碼片段。
創(chuàng)建代碼片段：

將代碼片段命名為 delivery-date。
點(diǎn)擊創(chuàng)建代碼片段。新的代碼片段文件將在代碼編輯器中打開。

安卓系統(tǒng)：

在 Shopify 后臺(tái)中，轉(zhuǎn)到在線商店 > 模板。
找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

在 Snippets 目錄中，點(diǎn)擊添加新代碼片段。
創(chuàng)建代碼片段：

將代碼片段命名為 delivery-date。
點(diǎn)擊創(chuàng)建代碼片段。新的代碼片段文件將在代碼編輯器中打開。

在新的 delivery-date.liquid 代碼片段中，粘貼以下代碼：

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

<div >   <p>     <label fo>Pick a delivery date:</label>     <input  type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />     <span > 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. 點(diǎn)擊**保存**。 ## 在購物車頁面中包含代碼片段 若要在購物車頁面中包含配送日期代碼片段，請執(zhí)行以下操作： 1. 在 **Sections** 目錄中，點(diǎn)擊 `cart-template.liquid`。如果您的模板中沒有此文件，則點(diǎn)擊 **Templates** 目錄中的 `cart.liquid`。 2. [查找](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find)代碼中的結(jié)束 `</form>` 標(biāo)記。在結(jié)束 `</form>` 標(biāo)記上方的新行中，粘貼以下代碼： ```liquid {% render 'delivery-date' %}

點(diǎn)擊保存。

您的購物車頁面中現(xiàn)在將有一個(gè)配送日期輸入字段。當(dāng)您點(diǎn)擊文本字段時(shí)，將出現(xiàn)日歷：

此自定義設(shè)置中使用的日期選擇器是 jQuery UI 庫中的小組件。此博客文章介紹如何在日期選擇器日歷中禁用特定日期。

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 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" defe></script> <div >   <p>     <label fo>Pick a delivery date:</label>     <input  type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />     <span  > 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 click cart.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.