將配送日期選擇器新增至您的購物車
您可以在購物車頁面上包含日曆，讓顧客指定訂單的配送日期。
在 theme.liquid 中包含 jQuery
為了讓此自訂內容正常運作，某些佈景主題會要求將 jQuery 的腳本標記新增至 theme.liquid 版面配置檔案。如果您使用 Boundless、Debut 17.2.0 或更新版本、Express、Narrative 或 Venture，則可能需要遵循下一個步驟：
在「版面配置」目錄中，按一下
theme.liquid。找到程式碼中的結束標籤
</head>。在結束標籤</head>上方新的一行，貼上下列程式碼
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}- 點擊「儲存」。
建立配送日期程式碼片段
為配送日期選擇器建立程式碼片段：
在 Shopify 管理介面 ，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
在「程式碼片段」目錄中，點擊「新增程式碼片段」：
建立程式碼片段：
在新的程式碼片段
delivery-date.liquid中，貼上下列程式碼：
{{ '//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>- 點擊「儲存」。
在購物車頁面中包含程式碼片段
在購物車頁面中包含配送日期程式碼片段：
在「區段」目錄中，點擊「
cart-template.liquid」。如果您的佈景主題沒有此檔案，則可以在「範本」目錄中，點擊「cart.liquid」。找到程式碼中的結束標籤
</form>。在結束標籤</form>上方新的一行，貼上下列程式碼
{% render 'delivery-date' %}- 點擊「儲存」。
您的購物車頁面上現在有了配送日期輸入欄位。點擊文字欄位內側就會顯示日曆：
此自訂中使用的日期選擇器是 jQuery UI 庫的小工具。此網誌文章說明如何在日期選擇器日曆中停用特定日期。