說明
登入

在購物車加入配送日期選擇器

您可以在購物車頁面加入日曆，讓顧客為其訂單指定配送日期。

配送日期選擇器

本頁內容

在 theme.liquid 中加入 jQuery

為使此自訂正常運作，部分佈景主題需要在 theme.liquid 版面配置檔案中加入 jQuery 的指令碼標籤。若您使用 Shopify 的免費佈景主題，可能需要依照以下步驟操作：

  1. 在「Layout」目錄中，點選 theme.liquid。

  2. 在程式碼中尋找結尾 </head> 標籤。在結尾 </head> 標籤的上一行貼上以下程式碼：

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. 點選「儲存」。

建立配送日期程式碼片段

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

電腦版

  1. 在 Shopify 管理介面中，前往「網路商店 > 佈景主題」。

  2. 找到要編輯的佈景主題，點選「…」按鈕開啟動作選單，然後點選「編輯程式碼」。

  3. 在「Snippets」目錄中，點選「新增程式碼片段」：

  4. 建立程式碼片段：

  5. 將此程式碼片段命名為 delivery-date。

  6. 點選「建立程式碼片段」。新的程式碼片段檔案會在程式碼編輯器中開啟。

  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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. 點選「儲存」。
行動裝置

  1. 在 Shopify app 中，點選 選單 圖示。

  2. 在「銷售管道」區段中，點選「網路商店」。

  3. 點選「管理佈景主題」。

  4. 找到要編輯的佈景主題，點選「…」按鈕開啟動作選單，然後點選「編輯程式碼」。

  5. 在「Snippets」目錄中，點選「新增程式碼片段」：

  6. 建立程式碼片段：

  7. 將此程式碼片段命名為 delivery-date。

  8. 點選「建立程式碼片段」。新的程式碼片段檔案會在程式碼編輯器中開啟。

  9. 在新的 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/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. 點選「儲存」。

在購物車頁面加入該程式碼片段

要在購物車頁面加入配送日期程式碼片段：

  1. 在「Sections」目錄中，點選 main-cart-items.liquid。

  2. 在程式碼中尋找結尾 </form> 標籤。在結尾 </form> 標籤的上一行貼上以下程式碼：

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

購物車頁面現在已有配送日期的輸入欄位。當您點選文字欄位時，會顯示日曆：

配送日期選擇器

此自訂使用的日期選擇器，是 jQuery UI 程式庫 的小工具。