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

Trang này được in vào Sep 09, 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/themes-by-shopify/vintage-themes/customizing-vintage-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ủ đề Boundless, Debut phiên bản 17.2.0 trở lên, Express, Narrative hoặc Venture, 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

  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 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).
  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 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).
  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 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 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ộ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í