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

注意

Shopify Theme Store 不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，只能接收安全性修復的相關更新。

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

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

注意

此自訂程序不適用於導覽匣式或彈出式購物車樣式，且僅適用於購物車頁面 (網址為 your-store.com/cart)。若您使用購物車導覽匣或彈出式視窗，則必須在佈景主題編輯器中，將購物車樣式變更為「頁面」。在佈景主題預覽中，將產品新增至購物車，然後在佈景主題編輯器中點擊「購物車頁面」分頁，便能檢視您的購物車設定。

在 theme.liquid 中包含 jQuery

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

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

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

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

1. 點擊「儲存」。

建立配送日期程式碼片段

電腦版

1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
3. 在「程式碼片段」目錄中，點擊「新增程式碼片段」：

4. 建立程式碼片段：

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

5. 在新的程式碼片段 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>

1. 點擊「儲存」。

iPhone

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
5. 在「程式碼片段」目錄中，點擊「新增程式碼片段」：

6. 建立程式碼片段：

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

7. 在新的程式碼片段 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>

1. 點擊「儲存」。

Android

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
5. 在「程式碼片段」目錄中，點擊「新增程式碼片段」：

6. 建立程式碼片段：

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

7. 在新的程式碼片段 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>

1. 點擊「儲存」。

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

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

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

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

{% render 'delivery-date' %}

1. 點擊「儲存」。

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

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