Thêm tùy chọn gói quà tặng vào trang giỏ hàng

Cẩn trọng

Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.

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 ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

Bạn có thể cung cấp dịch vụ gói quà cho khách hàng trên trang giỏ hàng của cửa hàng trực tuyến. Đối với khách hàng muốn gói đơn hàng, bạn có thể thu phí mức cố định hoặc tính phí theo sản phẩm.

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.

Tạo sản phẩm gói quà

Trước tiên, bạn sẽ tạo tùy chọn gói quà dưới dạng sản phẩm:

1. Trong trang quản trị Shopify, vào mục Sản phẩm.

2. Nhấp vào Add product (Thêm sản phẩm).

3. Tạo sản phẩm gói quà giống như bạn sẽ tạo bất kỳ sản phẩm nào khác:

   

• Bạn có thể sử dụng mô tả sản phẩm để giải thích những chất liệu sẽ dùng để gói quà các mặt hàng.
• Định giá cho sản phẩm gói quà theo giá bạn muốn thu đối với dịch vụ. Nếu muốn gói quà miễn phí, bạn nên đặt giá sản phẩm gói quà là 0.
• Bạn có thể tải lên hình ảnh của sản phẩm để cho khách hàng biết đơn hàng được gói quà trông như thế nào.
• Đảm bảo sản phẩm gói quà gồm hàng trong kho hoặc điều chỉnh cài đặt để Shopify không theo dõi hàng trong kho của sản phẩm gói quà. Nếu cửa hàng của bạn có nhiều địa điểm, bỏ chọn Theo dõi số lượng để ngăn Shopify theo dõi hàng trong kho đối với sản phẩm gói quà.

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

Tạo menu

Tiếp theo, tạo menu trỏ đến sản phẩm gói quà:

Máy tính để bàn

1. Trong trang quản trị Shopify, chuyển đến Cửa hàng trực tuyến > Điều hướng.
2. Nhấp vào Add menu (Thêm menu).
3. Đặt tên cho menu Gift wrapping, để mã điều khiển được chỉ định cho menu là gift-wrapping.

4. Thêm sản phẩm gói quà vào menu:

   1. Nhấp vào Thêm mục menu rồi nhập Tên cho liên kết đến sản phẩm gói quà.
   2. Trong trường Liên kết, chọn Sản phẩm rồi chọn sản phẩm gói quà từ menu thả xuống.
   3. Nhấp vào Add (Thêm).

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

iPhone

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. Chạm vào Navigation (Điều hướng).
4. Nhấp vào Add menu (Thêm menu).
5. Đặt tên cho menu Gift wrapping, để mã điều khiển được chỉ định cho menu là gift-wrapping.

6. Thêm sản phẩm gói quà vào menu:

   1. Nhấp vào Thêm mục menu rồi nhập Tên cho liên kết đến sản phẩm gói quà.
   2. Trong trường Liên kết, chọn Sản phẩm rồi chọn sản phẩm gói quà từ menu thả xuống.
   3. Nhấp vào Add (Thêm).

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

Android

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. Chạm vào Navigation (Điều hướng).
4. Nhấp vào Add menu (Thêm menu).
5. Đặt tên cho menu Gift wrapping, để mã điều khiển được chỉ định cho menu là gift-wrapping.

6. Thêm sản phẩm gói quà vào menu:

   1. Nhấp vào Thêm mục menu rồi nhập Tên cho liên kết đến sản phẩm gói quà.
   2. Trong trường Liên kết, chọn Sản phẩm rồi chọn sản phẩm gói quà từ menu thả xuống.
   3. Nhấp vào Add (Thêm).

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

Tạo đoạn mã

Máy tính để bàn

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 tên cho đoạn mã gift-wrapping của bạn và nhấp vào Tạo đoạn mã. Tệp đoạn mã của bạn sẽ mở trong trình biên tập mã.
5. Trong bước này, bạn sẽ dán một số mã vào tệp đoạn mã gift-wrapping mới. Mã bạn dán phụ thuộc vào cách bạn muốn thu phí khách hàng đối với dịch vụ gói quà:

iPhone

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 tên cho đoạn mã gift-wrapping của bạn và nhấp vào Tạo đoạn mã. Tệp đoạn mã của bạn sẽ mở trong trình biên tập mã.
7. Trong bước này, bạn sẽ dán một số mã vào tệp đoạn mã gift-wrapping mới. Mã bạn dán phụ thuộc vào cách bạn muốn thu phí khách hàng đối với dịch vụ gói quà:

Android

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 tên cho đoạn mã gift-wrapping của bạn và nhấp vào Tạo đoạn mã. Tệp đoạn mã của bạn sẽ mở trong trình biên tập mã.
7. Trong bước này, bạn sẽ dán một số mã vào tệp đoạn mã gift-wrapping mới. Mã bạn dán phụ thuộc vào cách bạn muốn thu phí khách hàng đối với dịch vụ gói quà:

Thêm phí mức cố định cho dịch vụ gói quà

Dán mã sau và Lưu:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Thêm một khoản phí được nhân với số lượng sản phẩm trong đơn hàng

Với tùy chọn này, nếu trong đơn hàng có ba sản phẩm, phí gói quà sẽ được nhân với ba. Dán mã sau và Lưu:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Thêm đoạn mã vào mẫu giỏ hàng của bạn

Để thêm đoạn mã gói quà vào mẫu giỏ hàng:

1. Trong thư mục Mục, nhấp vào cart-template.liquid. Nếu chủ đề của bạn không có cart-template.liquid, 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 'gift-wrapping' %}

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