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

Trang này được in vào Apr 26, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/customizing-themes/add-date-picker.

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

Trên trang này

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:

  1. Trên 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ã.
  3. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới:

  4. 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ã.

  5. 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).
  1. Trong ứng dụng Shopify, chạm vào nút ….
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn 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ã.
  5. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới:

  6. 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ã.

  7. 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).
  1. Trong ứng dụng Shopify, chạm vào nút ….
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn 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ã.
  5. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới:

  6. 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ã.

  7. 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ộp chọn ngày giao hàng

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.

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

Dùng thử miễn phí