如果您使用 Shopify 的免費(fèi)模板，您可以聯(lián)系 Shopify 支持團(tuán)隊(duì)獲得關(guān)于此教程的幫助。此教程需要 15 分鐘的設(shè)計(jì)時(shí)間。若要了解詳情，請(qǐng)參閱 Support for themes。
此自定義適用于 Online Store 2.0 模板，不適用于經(jīng)典 Shopify 模板。找到您的模板架構(gòu)版本。
您可以在購(gòu)物車(chē)頁(yè)面上包含一個(gè)日歷，使客戶能夠指定其訂單的配送日期。
注意
此自定義設(shè)置不適用于抽屜式或彈出式購(gòu)物車(chē)，僅適用于購(gòu)物車(chē)頁(yè)面（位于 URL your-store.com/cart）。如果您使用購(gòu)物車(chē)抽屜或彈出式購(gòu)物車(chē)，您將需要在模板編輯器中將您的購(gòu)物車(chē)樣式更改為購(gòu)物車(chē)頁(yè)面。在模板預(yù)覽中向購(gòu)物車(chē)中添加產(chǎn)品，然后點(diǎn)擊模板編輯器中的購(gòu)物車(chē)頁(yè)面選項(xiàng)卡，以查看您的購(gòu)物車(chē)設(shè)置。
若要使此自定義正常工作，某些模板需要將 jQuery 的腳本標(biāo)記添加到 theme.liquid 布局文件中。如果您使用免費(fèi)的 Shopify Online Store 2.0 模板，則可能需要按照如下步驟操作：
在 Layout 目錄中，點(diǎn)擊 theme.liquid。
查找代碼中的結(jié)束 </head> 標(biāo)記。在結(jié)束 </head> 標(biāo)記上方的新行中，粘貼以下代碼：
{{'//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'|script_tag}} 點(diǎn)擊保存。
創(chuàng)建配送日期代碼片段
若要為配送日期選擇器創(chuàng)建代碼片段，請(qǐng)執(zhí)行以下操作：
創(chuàng)建代碼片段：
將代碼片段命名為 delivery-date。 點(diǎn)擊創(chuàng)建代碼片段。新的代碼片段文件將在代碼編輯器中打開(kāi)。在新的 delivery-date.liquid 代碼片段中，粘貼以下代碼：
{{ '//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">Pick a delivery date:</label><inputid="date"type="text"name="attributes[date]"value="{{ cart.attributes.date }}"/><spanstyle="display:block"class="instructions">We do not deliver during the weekend.</span></p></div><script>window.onload=function(){if(window.jQuery){let$=window.jQuery;$(function(){$("#date").datepicker({minDate:+1,maxDate:'+2M',beforeShowDay:$.datepicker.noWeekends});});}}</script> 點(diǎn)擊保存。
iPhone/Android
在 Shopify 應(yīng)用中，點(diǎn)擊 … 按鈕。 在銷(xiāo)售渠道部分，輕觸在線商店。 輕觸管理模板。 找到要編輯的模板，點(diǎn)擊 ... 按鈕打開(kāi)操作菜單，然后點(diǎn)擊編輯代碼。 在 Snippets 目錄中，點(diǎn)擊添加新代碼片段。創(chuàng)建代碼片段：
將代碼片段命名為 delivery-date。 點(diǎn)擊創(chuàng)建代碼片段。新的代碼片段文件將在代碼編輯器中打開(kāi)。在新的 delivery-date.liquid 代碼片段中，粘貼以下代碼：
{{ '//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">Pick a delivery date:</label><inputid="date"type="text"name="attributes[date]"value="{{ cart.attributes.date }}"/><spanstyle="display:block"class="instructions">We do not deliver during the weekend.</span></p></div><script>window.onload=function(){if(window.jQuery){let$=window.jQuery;$(function(){$("#date").datepicker({minDate:+1,maxDate:'+2M',beforeShowDay:$.datepicker.noWeekends});});}}</script> 點(diǎn)擊保存。
在購(gòu)物車(chē)頁(yè)面中包含代碼片段
若要在購(gòu)物車(chē)頁(yè)面中包含配送日期代碼片段，請(qǐng)執(zhí)行以下操作：
在 Sections 目錄中，點(diǎn)擊 main-cart-items.liquid。
查找代碼中的結(jié)束 </form> 標(biāo)記。在結(jié)束 </form> 標(biāo)記上方的新行中，粘貼以下代碼：
{%render'delivery-date'%} 點(diǎn)擊保存。您的購(gòu)物車(chē)頁(yè)面中現(xiàn)在將有一個(gè)配送日期輸入字段。當(dāng)您點(diǎn)擊文本字段時(shí)，將出現(xiàn)日歷：
此自定義中使用的日期選擇器是 jQuery UI 庫(kù)中的一個(gè)小組件。
