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

Lưu ý

Nếu bạn sử dụng chủ đề miễn phí từ Shopify, bạn có thể liên hệ với Bộ phận hỗ trợ của Shopify để được trợ giúp về hướng dẫn này. Thời gian thiết kế yêu cầu 15 phút. Để tìm hiểu thêm, tham khảo Support cho themes.

Lưu ý

Đây là tùy chỉnh cho chủ đề Online Store 2.0 và không áp dụng cho chủ đề Shopify cổ điển. Khám phá phiên bản cấu trúc của chủ đề.

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.

Cẩn trọng

Nội dung tùy chỉnh này không áp dụng cho giỏ hàng kiểu ngăn hoặc cửa sổ bật lên và chỉ áp dụng cho một trang giỏ hàng (tại URL your-store.com/cart). Nếu bạn dùng ngăn giỏ hàng hoặc cửa sổ bật lên, bạn cần thay đổi kiểu giỏ hàng sang Trang trong trình biên tập chủ đề. Thêm một sản phẩm vào giỏ hàng trong chế độ xem trước chủ đề, sau đó nhấp vào tab Trang giỏ hàng trong trình biên tập chủ đề để xem cài đặt giỏ hàng.

Thêm jQuery vào theme.liquid

Để tùy chỉnh này có hiệu lực, 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ủ đề miễn phí từ Online Store 2.0 của Shopify, bạn có thể phải 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>:

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

1. 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:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

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ã:

3. Dán mã sau vào đoạn mã mới delivery-date.liquid của bạn:

{{ '//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 weekend.</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 Sections, chạm vào main-cart-items.liquid.

2. Tìm 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>:

{% 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ộpchọn ngày được sử dụng trong tùy chỉnh này là một tiện ích của thư viện giao diện người dùng jQuery.