如果您使用 Shopify 的免費模板，您可以聯系 Shopify 支持團隊獲得關于此教程的幫助。此教程需要 15 分鐘的設計時間。若要了解詳情，請參閱 Support for themes。
此自定義適用于 Online Store 2.0 模板，不適用于經典 Shopify 模板。找到您的模板架構版本。
您可以在購物車頁面上包含一個日歷，使客戶能夠指定其訂單的配送日期。
注意
此自定義設置不適用于抽屜式或彈出式購物車，僅適用于購物車頁面（位于 URL your-store.com/cart）。如果您使用購物車抽屜或彈出式購物車，您將需要在模板編輯器中將您的購物車樣式更改為購物車頁面。在模板預覽中向購物車中添加產品，然后點擊模板編輯器中的購物車頁面選項卡，以查看您的購物車設置。
若要使此自定義正常工作，某些模板需要將 jQuery 的腳本標記添加到 theme.liquid 布局文件中。如果您使用免費的 Shopify Online Store 2.0 模板，則可能需要按照如下步驟操作：
在 Layout 目錄中，點擊 theme.liquid。
查找代碼中的結束 </head> 標記。在結束 </head> 標記上方的新行中，粘貼以下代碼：
{{'//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'|script_tag}} 點擊保存。
創建配送日期代碼片段
若要為配送日期選擇器創建代碼片段，請執行以下操作：
創建代碼片段：
將代碼片段命名為 delivery-date。 點擊創建代碼片段。新的代碼片段文件將在代碼編輯器中打開。在新的 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> 點擊保存。
iPhone/Android
在 Shopify 應用中，點擊 … 按鈕。 在銷售渠道部分，輕觸在線商店。 輕觸管理模板。 找到要編輯的模板，點擊 ... 按鈕打開操作菜單，然后點擊編輯代碼。 在 Snippets 目錄中，點擊添加新代碼片段。創建代碼片段：
將代碼片段命名為 delivery-date。 點擊創建代碼片段。新的代碼片段文件將在代碼編輯器中打開。在新的 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> 點擊保存。
在購物車頁面中包含代碼片段
若要在購物車頁面中包含配送日期代碼片段，請執行以下操作：
在 Sections 目錄中，點擊 main-cart-items.liquid。
查找代碼中的結束 </form> 標記。在結束 </form> 標記上方的新行中，粘貼以下代碼：
{%render'delivery-date'%} 點擊保存。您的購物車頁面中現在將有一個配送日期輸入字段。當您點擊文本字段時，將出現日歷：
此自定義中使用的日期選擇器是 jQuery UI 庫中的一個小組件。
