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

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.

Gói quà

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 phần Shopify admin (Quản trị viên Shopify), vào mục Sản phẩm > All products (Tất 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:

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

  • 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à:

  1. Nhấp vào Add menu (Thêm menu).

  2. Đặt tên cho menu Gift wrapping, để mã điều khiển được chỉ định cho menu là gift-wrapping.

  3. 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).
  4. Nhấp vào Save menu (Lưu menu).

Tạo đoạn mã

Để tạo đoạn mã cho tùy chọn gói quà:

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

  2. Đặ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ã.

  3. 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).

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

Dùng thử miễn phí