カートページにギフト包装のオプションを追加する

オンラインストアのカートページで、お客様にギフト包装サービスをすすめることができます。注文の包装を希望するお客様には、一定料金または商品ごとの料金を請求できます。

警告: このカスタマイズはドロワーやポップアップのカートスタイルでは動作せず、カートページのみで動作します (カートページのURLはyour-store.com/cart)。カートドロワーやカートのポップアップを使用する場合は、テーマエディタでカートスタイルを [ページ] に変更する必要があります。テーマのプレビューでカートに商品を追加し、テーマエディタの [カートページ] タブをクリックしてカート設定を表示します。

ギフト包装商品を作成する

最初に、ギフト包装オプションを商品として作成します。

管理画面から [商品管理] に移動します。
[商品を追加する] をクリックします。
次に示されているように、他の商品を作成するのと同じ方法でギフト包装商品を作成します。

商品説明を使用して、アイテムのギフト包装に使用する材料について説明します。
ギフト包装商品に対して、サービスに対して請求する価格を設定します。ギフト包装を無料にする場合は、ギフト包装商品の価格を0にします。
商品の画像をアップロードして、ギフト包装された注文の外観をお客様に表示します。
ギフト包装商品に在庫が含まれるようにする、または設定を調整して、Shopifyでギフト包装商品の在庫が追跡されないようにすることができます。ストアに複数のロケーションがある場合、[在庫を追跡する] のチェックを外して、Shopifyでギフト包装商品の在庫が追跡されないようにします。

[保存] をクリックします。

メニューを作成する

次に、ギフト包装商品を指定するメニューを作成します。

デスクトップ

管理画面で [コンテンツ] > [メニュー] の順に移動します。
[メニューを追加する] をクリックします。
メニューにGift wrappingと名付けます。それで、メニューに割り当てられたハンドルはgift-wrappingになります。
次の手順でギフト包装商品をメニューに追加します。
1. [メニュー項目を追加する] をクリックし、ギフトラッピング商品の「名前」を入力します。
2. 「リンク」のフィールドから、商品を検索します。ドロップダウンメニューからギフトラッピングの商品を選択します。
3. [追加] をクリックします。
メニューの保存をクリック

iPhone

Shopifyアプリで [...] ボタンをタップします。
[コンテンツ] > [メニュー] の順にタップします。
[メニューを追加する] をクリックします。
メニューにGift wrappingと名付けます。それで、メニューに割り当てられたハンドルはgift-wrappingになります。
次の手順でギフト包装商品をメニューに追加します。
1. [メニュー項目を追加する] をクリックし、ギフトラッピング商品の「名前」を入力します。
2. 「リンク」のフィールドから、商品を検索します。ドロップダウンメニューからギフトラッピングの商品を選択します。
3. [追加] をクリックします。
メニューの保存をクリック

Android

Shopifyアプリで [...] ボタンをタップします。
[コンテンツ] > [メニュー] の順にタップします。
[メニューを追加する] をクリックします。
メニューにGift wrappingと名付けます。それで、メニューに割り当てられたハンドルはgift-wrappingになります。
次の手順でギフト包装商品をメニューに追加します。
1. [メニュー項目を追加する] をクリックし、ギフトラッピング商品の「名前」を入力します。
2. 「リンク」のフィールドから、商品を検索します。ドロップダウンメニューからギフトラッピングの商品を選択します。
3. [追加] をクリックします。
メニューの保存をクリック

コードスニペットを作成する

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
スニペットにgift-wrappingと名付け、[スニペットを作成する] をクリックします。スニペットファイルはコードエディタで開きます。
このステップでは、新しいgift-wrappingスニペットファイルにコードを貼り付けます。貼り付けるコードは、お客様にギフト包装サービスを請求する方法によって異なります。

iPhone

Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
スニペットにgift-wrappingと名付け、[スニペットを作成する] をクリックします。スニペットファイルはコードエディタで開きます。
このステップでは、新しいgift-wrappingスニペットファイルにコードを貼り付けます。貼り付けるコードは、お客様にギフト包装サービスを請求する方法によって異なります。

Android

Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
スニペットにgift-wrappingと名付け、[スニペットを作成する] をクリックします。スニペットファイルはコードエディタで開きます。
このステップでは、新しい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 %}

注文の商品数で乗算された料金を追加する

このオプションを使用すると、注文に3つの商品がある場合、ギフト包装料金は3倍になります。次のコードを貼り付けて [保存] します。

{% 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 %}

カートテンプレートにスニペットを含める

次の手順でカートテンプレートにギフト包装スニペットを含めます。

[セクション] ディレクトリで、cart-template.liquidをクリックします。テーマにcart-template.liquidがない場合は、[テンプレート] ディレクトリの [cart.liquid] をクリックします。
コードで</form>終了タグを探します。</form>終了タグの上の新しい行に、次のコードを貼り付けます。

{% render 'gift-wrapping' %}

[保存] をクリックします。