Thêm hộp chọn ngày giao hàng vào giỏ hàng

Bạn có thể thêm lịch trên trang giỏ hàng để khách hàng có thể chỉ định ngày giao hàng cho đơn hàng.

Hộp chọn ngày giao hàng

Thêm jQuery vào theme.liquid

Để tùy chỉnh này hoạt động, một số chủ đề yêu cầu thêm thẻ tập lệnh cho jQuery vào tệp bố cục theme.liquid. Nếu sử dụng chủ đề Boundless, Debut phiên bản 17.2.0 trở lên, Express, Narrative hoặc Venture, bạn có thể cần làm theo bước tiếp theo:

  1. Trong thư mục Layout, nhấp vào theme.liquid.

  2. Tìm thẻ có kết thúc là </head> trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là </head>:

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

  3. Nhấp vào Save (Lưu).

Tạo đoạn mã ngày giao hàng

Để tạo đoạn mã cho hộp chọn ngày giao hàng:

  1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới:

  2. Tạo đoạn mã:

    1. Đặt tên cho đoạn mã delivery-date của bạn.
    2. Nhấp vào Tạo đoạn mã. Tệp đoạn mã mới sẽ mở ra trong trình chỉnh sửa mã.
  3. Dán mã sau vào đoạn mã mới delivery-date.liquid của bạn:

```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. Nhấp vào **Save** (Lưu).

## Thêm đoạn mã vào trang giỏ hàng

Để thêm đoạn mã ngày giao hàng vào trang giỏ hàng:

1. Trong thư mục **Mục**, nhấp vào `cart-template.liquid`. Nếu chủ đề chủa bạn không có tệp này, hãy nhấp vào `cart.liquid` trong thư mục **Mẫu**.

2. [Tìm](/manual/productivity-tools/keyboard-shortcuts#find) thẻ có kết thúc là `</form>` trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là `</form>`:

```liquid

{% render 'delivery-date' %}
  1. Nhấp vào Save (Lưu).

Bạn hiện đã có trường nhập ngày giao hàng trên trang giỏ hàng. Khi bạn nhấp vào trong trường văn bản, lịch sẽ xuất hiện:

Hộp chọn ngày giao hàng

Hộp chọn ngày được sử dụng trong tùy chỉnh này là một tiện ích từ thư viện giao diện người dùng jQuery. Bài viết blog này giải thích cách tắt các ngày cụ thể trong lịch chọn ngày.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí