將配送日期選擇器新增至您的購物車
您可以在購物車頁面上包含日曆，讓顧客指定訂單的配送日期。< / p >< p >< / p >
在主题。液体中包含jQuery
為了讓此自訂內容正常運作，某些佈景主題會要求將jQuery的腳本標記新增至主题。液体版面配置檔案。如果您使用免費的Shopify在线欧宝体育官网入口首页商店2.0佈景主題,則可能需要遵循下一個步驟:< / p >
在「版面配置」目錄中，按一下
theme.liquid。< / p >找到程式碼中的結束標籤
> < /头。在結束標籤> < /头上方新的一行，貼上下列程式碼：< / p >
{{< / span ><跨类=＂w">' / / ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js '< / span ><跨类=＂w">|< / span ><跨类=＂w">script_tag< / span ><跨类=＂w">}}< / span >- 點擊「儲存」。
建立配送日期程式碼片段
為配送日期選擇器建立程式碼片段：< / p >< div类=＂section-tag-block">
在Shopify管理介面，前往”線上商店」>「佈景主題」。< / p >
找到要編輯的佈景主題，按一下「.．.」按鈕以開啟動作選單，然後點擊「編輯程式碼」。< / p >
在Shopify應用程式中，點一下「商店」。< / p >
在銷售管道畫面上，點一下「線上商店」。< / p >
點一下「管理佈景主題」。< / p >
找到要編輯的佈景主題，按一下「.．.」按鈕以開啟動作選單，然後點擊「編輯程式碼」。< / p >
在Shopify應用程式中，點一下「商店」。< / p >
在銷售管道畫面上，點一下「線上商店」。< / p >
點一下「管理佈景主題」。< / p >
找到要編輯的佈景主題，按一下「.．.」按鈕以開啟動作選單，然後點擊「編輯程式碼」。< / p >
在「程式碼片段」目錄中，點擊「新增程式碼片段」：< / p >
建立程式碼片段：< / p >
在新的程式碼片段
delivery-date.liquid中，貼上下列程式碼：< / p >
{{'//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag}}<跨类=＂nt"><脚本< / span ><跨类=＂na">src =< / span ><跨类=＂s">“https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”< / span ><跨类=＂na">推迟=< / span ><跨类=＂s">“推迟”< / span ><跨类=＂nt">> < /脚本>< / span ><跨类=＂nt">< div< / span ><跨类=＂na">风格=< / span ><跨类=＂s">宽度:300 px;明确:;“< / span ><跨类=＂nt">>< / span ><跨类=＂nt">< p >< / span ><跨类=＂nt"><标签< / span ><跨类=＂na">为=< / span ><跨类=＂s">“日期”< / span ><跨类=＂nt">>< / span >选择交付日期:<跨类=＂nt">< / >标签< / span ><跨类=＂nt"><输入< / span ><跨类=＂na">id =< / span ><跨类=＂s">“日期”< / span ><跨类=＂na">类型=< / span ><跨类=＂s">“文本”< / span ><跨类=＂na">name =< / span ><跨类=＂s">“[日期]属性”< / span ><跨类=＂na">值=< / span ><跨类=＂s">"{{cart.attributes.date}}"< / span ><跨类=＂nt">/>< / span ><跨类=＂nt"><跨< / span ><跨类=＂na">风格=< / span ><跨类=＂s">“显示:块”< / span ><跨类=＂na">类=< / span ><跨类=＂s">“指令”< / span ><跨类=＂nt">>< / span >我们周末不送货。<跨类=＂nt">< / span >< / span ><跨类=＂nt">< / p >< / span ><跨类=＂nt">< / div >< / span ><跨类=＂nt"><脚本>< / span ><跨类=＂nb">窗口< / span ><跨类=＂p">．< / span ><跨类=＂nx">onload< / span ><跨类=＂o">＝< / span ><跨类=＂kd">函数< / span ><跨类=＂p">（）< / span ><跨类=＂p">｛< / span ><跨类=＂k">如果< / span ><跨类=＂p">（< / span ><跨类=＂nb">窗口< / span ><跨类=＂p">．< / span ><跨类=＂nx">jQuery< / span ><跨类=＂p">）< / span ><跨类=＂p">｛< / span ><跨类=＂kd">让< / span ><跨类=＂nx">＄< / span ><跨类=＂o">＝< / span ><跨类=＂nb">窗口< / span ><跨类=＂p">．< / span ><跨类=＂nx">jQuery< / span ><跨类=＂p">；< / span ><跨类=＂nx">＄< / span ><跨类=＂p">（< / span ><跨类=＂kd">函数< / span ><跨类=＂p">（）< / span ><跨类=＂p">｛< / span ><跨类=＂nx">＄< / span ><跨类=＂p">（< / span ><跨类=＂dl">＂< / span ><跨类=＂s2">#日期< / span ><跨类=＂dl">＂< / span ><跨类=＂p">）.< / span ><跨类=＂nx">datepicker< / span ><跨类=＂p">({< / span ><跨类=＂na">minDate< / span ><跨类=＂p">：< / span ><跨类=＂o">+< / span ><跨类=＂mi">1< / span ><跨类=＂p">，< / span ><跨类=＂na">maxDate< / span ><跨类=＂p">：< / span ><跨类=＂dl">＇< / span ><跨类=＂s1">+ 2米< / span ><跨类=＂dl">＇< / span ><跨类=＂p">，< / span ><跨类=＂na">beforeShowDay< / span ><跨类=＂p">：< / span ><跨类=＂nx">＄< / span ><跨类=＂p">．< / span ><跨类=＂nx">datepicker< / span ><跨类=＂p">．< / span ><跨类=＂nx">noWeekends< / span ><跨类=＂p">})；< / span ><跨类=＂p">})；< / span ><跨类=＂p">｝< / span ><跨类=＂p">｝< / span ><跨类=＂nt">> < /脚本< / span >- 點擊「儲存」。
在購物車頁面中包含程式碼片段
在購物車頁面中包含配送日期程式碼片段：< / p >
在「區段」目錄中，按一下
main-cart-items.liquid。< / p >找到程式碼中的結束標籤
> < /形式。在結束標籤> < /形式上方新的一行，貼上下列程式碼：< / p >
{%< / span ><跨类=＂w">渲染< / span ><跨类=＂w">“交货日期”< / span ><跨类=＂w">％}< / span >- 點擊「儲存」。
您的購物車頁面上現在有了配送日期輸入欄位。點擊文字欄位內側就會顯示日曆：< / p >< p >< / p >
此自訂內容使用的日期選擇器是jQuery UI庫的小工具。< / p >