將配送日期選擇器新增至您的購物車

您可以在購物車頁面上包含日曆,讓顧客指定訂單的配送日期。

配送日期選擇器

在 theme.liquid 中包含 jQuery

為了讓此自訂內容正常運作,某些佈景主題會要求將 jQuery 的腳本標記新增至 theme.liquid 版面配置檔案。如果您使用 Boundless、Debut 17.2.0 或更新版本、Express、Narrative 或 Venture,則可能需要遵循下一個步驟:

  1. 「版面配置」目錄中,按一下 theme.liquid

  2. 在程式碼中找到結束標籤 </head>。在結束標籤 </head> 上方新的一行,貼上下列程式碼:

    liquid {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

  3. 點擊「儲存」。

建立配送日期程式碼片段

為配送日期選擇器建立程式碼片段:

  1. 在「程式碼片段」目錄中,點擊「新增程式碼片段」:

  2. 建立程式碼片段:

    1. 將程式碼片段命名為 delivery-date
    2. 點擊「建立程式碼片段」。新的程式碼片段檔案將在程式碼編輯器中開啟。
  3. 在新的程式碼片段 delivery-date.liquid 中,貼上下列程式碼:

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

<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>
1. 點擊「**儲存**」。

## 在購物車頁面中包含程式碼片段

在購物車頁面中包含配送日期程式碼片段:

1. 在「**區段**」目錄中,點擊「`cart-template.liquid`」。如果您的佈景主題沒有此檔案,則可以在「**範本**」目錄中,點擊「`cart.liquid`」。

2. 在程式碼中[找到](/manual/productivity-tools/keyboard-shortcuts#find)結束標籤 `</form>`。在結束標籤 `</form>` 上方新的一行,貼上下列程式碼:

```liquid

{% render 'delivery-date' %}
  1. 點擊「儲存」。

您的購物車頁面上現在有了配送日期輸入欄位。點擊文字欄位內側就會顯示日曆:

配送日期選擇器

此自訂中使用的日期選擇器是 jQuery UI 庫的小工具。此網誌文章說明如何在日期選擇器日曆中停用特定日期。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用