將禮品包裝選項新增至購物車頁面

您可以在網路商店的購物車頁面中,向顧客提供禮品包裝服務。對於想要包裝訂單的顧客,您可以以單一費率收費,或按產品收費。

禮品包裝

建立禮品包裝產品

首先,您會將禮品包裝選項建立為產品:

  1. 在 Shopify 管理介面中,前往「產品」

  2. 按一下「新增商品」。

  3. 以建立其他商品的方式建立禮品包裝商品:

    Create a gift-wrap product

  • 您可以使用產品說明,說明哪些材料會用於包裝這些品項。
  • 為禮品包裝產品訂定欲收取的服務費用。如果您想要免費贈送禮品包裝,請將禮品包裝產品的價格設為 0
  • 您可以上傳產品圖片,以向顧客顯示領品禮品的訂單外觀。
  • 請確認您的禮品包裝產品包含庫存,或請調整設定讓 Shopify 不會追蹤禮品包裝產品的庫存。如果您的商店有多個地點,請取消勾選「追蹤數量」,以防止 Shopify 追蹤禮品包裝產品的庫存。
  1. 點擊「儲存」。

建立選單

接下來,建立指向禮品包裝產品的選單:

  1. 按一下「新增選單」。

  2. 將選單命名命名為 Gift wrapping,這樣一來指派至該選單的控制代碼就會是 gift-wrapping

  3. 將禮品包裝產品新增至選單:

  4. 按一下「儲存選單」。

建立程式碼片段

為禮品包裝選項建立程式碼片段:

  1. 「程式碼片段」目錄中,按一下「新增程式碼片段」

  2. 將程式碼片段命名為 gift-wrapping,然後點擊「建立程式碼片段」。您的程式碼片段檔案將在程式碼編輯器中開啟。

  3. 在此步驟中,您會將一些程式碼貼上至新的程式碼片段檔案 gift-wrapping。您貼上的程式碼取決於您要如何向顧客收取禮品包裝服務的費用:

{% 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 %}
### Add a charge that is multiplied by the number of products in the order

With this option, if there are three products in the order, then the gift wrap charge will be multiplied by three. Paste the following code and **Save**:
{% 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 %}

在購物車範本中包含此程式碼片段

在購物車範本中納入禮品包裝程式碼片段:

  1. 在「區段」目錄中,點擊「cart-template.liquid」。如果您的佈景主題沒有 cart-template.liquid,則可以在「範本」目錄中,點擊「cart.liquid」。

  2. 在程式碼中找到結束標籤 </form>。在結束標籤 </form> 上方新的一行,貼上下列程式碼

{% render 'gift-wrapping' %}
  1. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用