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

注意

Shopify Theme Store 不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，只能接收安全性修復的相關更新。

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

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

注意

此自訂程序不適用於導覽匣式或彈出式購物車樣式，且僅適用於購物車頁面 (網址為 your-store.com/cart)。若您使用購物車導覽匣或彈出式視窗，則必須在佈景主題編輯器中，將購物車樣式變更為「頁面」。在佈景主題預覽中，將產品新增至購物車，然後在佈景主題編輯器中點擊「購物車頁面」分頁，便能檢視您的購物車設定。

建立禮品包裝產品

首先，您會將禮品包裝選項建立為產品：

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

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

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

   

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

1. 點擊「儲存」。

建立選單

接下來，建立指向禮品包裝產品的選單：

電腦版

1. 從 Shopify 管理介面 中，前往「線上商店 > 導覽」。
2. 按一下「新增選單」。
3. 將選單命名命名為 Gift wrapping，這樣一來指派至該選單的控制代碼就會是 gift-wrapping。

4. 將禮品包裝產品新增至選單：

   1. 點擊「新增選單項目」，然後輸入禮品包裝產品連結的名稱。
   2. 在「連結」欄位中，選取「產品」，然後從下拉式選單中選取禮品包裝產品。
   3. 按一下「新增」。

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

iPhone

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「導覽」。
4. 按一下「新增選單」。
5. 將選單命名命名為 Gift wrapping，這樣一來指派至該選單的控制代碼就會是 gift-wrapping。

6. 將禮品包裝產品新增至選單：

   1. 點擊「新增選單項目」，然後輸入禮品包裝產品連結的名稱。
   2. 在「連結」欄位中，選取「產品」，然後從下拉式選單中選取禮品包裝產品。
   3. 按一下「新增」。

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

Android

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「導覽」。
4. 按一下「新增選單」。
5. 將選單命名命名為 Gift wrapping，這樣一來指派至該選單的控制代碼就會是 gift-wrapping。

6. 將禮品包裝產品新增至選單：

   1. 點擊「新增選單項目」，然後輸入禮品包裝產品連結的名稱。
   2. 在「連結」欄位中，選取「產品」，然後從下拉式選單中選取禮品包裝產品。
   3. 按一下「新增」。

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

建立程式碼片段

電腦版

1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
3. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。
4. 將程式碼片段命名為 gift-wrapping，然後點擊「建立程式碼片段」。您的程式碼片段檔案將在程式碼編輯器中開啟。
5. 在此步驟中，您會將一些程式碼貼上至新的程式碼片段檔案 gift-wrapping。您貼上的程式碼取決於您要如何向顧客收取禮品包裝服務的費用：

iPhone

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
5. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。
6. 將程式碼片段命名為 gift-wrapping，然後點擊「建立程式碼片段」。您的程式碼片段檔案將在程式碼編輯器中開啟。
7. 在此步驟中，您會將一些程式碼貼上至新的程式碼片段檔案 gift-wrapping。您貼上的程式碼取決於您要如何向顧客收取禮品包裝服務的費用：

Android

1. 在 Shopify 應用程式中，點選「…」按鈕。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。
4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
5. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。
6. 將程式碼片段命名為 gift-wrapping，然後點擊「建立程式碼片段」。您的程式碼片段檔案將在程式碼編輯器中開啟。
7. 在此步驟中，您會將一些程式碼貼上至新的程式碼片段檔案 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 %}

新增乘以訂單產品數量的費用

使用此選項，如果訂單有三項產品，則禮品包裝費用會乘以三。貼上下列程式碼然後「儲存」：

{% 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. 點擊「儲存」。