Trợ giúp
Đăng nhập

Thêm công cụ chọn ngày giao hàng vào giỏ hàng

Bạn có thể đưa lịch vào trang giỏ hàng để cho phép khách hàng chỉ định ngày giao hàng cho đơn hàng của họ.

Công cụ chọn ngày giao hàng

Trên trang này

Thêm jQuery vào theme.liquid

Để tùy chỉnh này hoạt động, một số chủ đề yêu cầu phải thêm thẻ script cho jQuery vào tệp bố cục theme.liquid. Nếu sử dụng chủ đề Shopify miễn phí, bạn có thể cần thực hiện bước tiếp theo:

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

  2. Tìm thẻ đóng </head> trong mã. Trên một dòng mới phía trên thẻ đóng </head>, dán đoạn mã sau:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Nhấp vào Lưu.

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

Để tạo đoạn mã cho công cụ chọn ngày giao hàng:

Máy tính để bàn

  1. Từ trang quản trị Shopify, đi tới 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, rồi nhấp vào Chỉnh sửa mã.

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

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

  5. Đặt tên cho đoạn mã là delivery-date.

  6. Nhấp vào Tạo đoạn mã. Tệp đoạn mã mới sẽ mở trong trình chỉnh sửa mã.

  7. Trong đoạn mã delivery-date.liquid mới, dán đoạn mã sau:

{{ '//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. Nhấp vào Lưu.
Thiết bị di động

  1. Từ ứng dụng Shopify, chạm vào biểu tượng Menu.

  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 Quản lý chủ đề.

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

  5. Trong thư mục Snippets, chạm vào Thêm đoạn mã mới:

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

  7. Đặt tên cho đoạn mã là delivery-date.

  8. Chạm vào Tạo đoạn mã. Tệp đoạn mã mới sẽ mở trong trình chỉnh sửa mã.

  9. Trong đoạn mã delivery-date.liquid mới, dán đoạn mã sau:

{{ '//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. Chạm vào 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, nhấp vào main-cart-items.liquid.

  2. Tìm thẻ đóng </form> trong mã. Trên một dòng mới phía trên thẻ đóng </form>, dán đoạn mã sau:

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

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

Công cụ chọn ngày giao hàng

Công cụ chọn ngày được sử dụng trong tùy chỉnh này là tiện ích từ thư viện jQuery UI.