アプリ不要！Shopify商品ページにギフトラッピングオプションを追加し、カートで自動課金

    {% for tag in product.tags %}
      {%- if tag contains 'ギフト' -%}
        <p class="line-item-property__field">
          <label>ギフトラッピング</label><br>
          <select id="" name="properties[ギフトラッピング]">
            <option value="">希望しない</option>
            <option value="希望する">希望する</option>
          </select>
        </p>
      {%- endif -%}
    {% endfor %}

{% assign gift-wrap-count = 0 %}
{% for item in cart.items %}
  {% assign item_gift_wrap_count = 0 %}
  {% for property in item.properties %}
    {% if property[0] == 'ギフトラッピング' and property[1] == '希望する' %}
      {% assign item_gift_wrap_count = item.quantity %}
    {% endif %}
  {% endfor %}
  {% assign gift-wrap-count = gift-wrap-count | plus: item_gift_wrap_count %}
{% endfor %}

{% assign gift_wraps_in_cart = 0 %}
{% assign gift_wrap_product_id = linklists.gift-wrapping.links.first.object.variants.first.id %}

{% for item in cart.items %}
  {% if item.id == gift_wrap_product_id %}
    {% assign gift_wraps_in_cart = item.quantity %}
  {% endif %}
{% endfor %}

{% if gift-wrap-count > 0 %}
  <input id="gift-wrapping" type="hidden" name="attributes[ギフトラッピング]" value="yes" checked="checked" />
{% endif %}

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

<script>
  Shopify.Cart = Shopify.Cart || {};
  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function (quantity) {
    var headers = new Headers({ 'Content-Type': 'application/json' });
    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ gift_wrap_product_id }}: quantity }, attributes: { 'ギフトラッピング': '希望する' } })
    };
    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: { {{ gift_wrap_product_id }}: 0 }, attributes: { 'ギフトラッピング': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
      .then(function () {
        location.href = '/cart';
      });
  }

  document.addEventListener("DOMContentLoaded", function () {
    if ({{ cart.items.size }} == 1 && {{ gift_wraps_in_cart }} > 0) {
      Shopify.Cart.GiftWrap.remove();
    } else if ({{ gift_wraps_in_cart }} != {{ gift-wrap-count }}) {
      Shopify.Cart.GiftWrap.set({{ gift-wrap-count }});
    }

    document.querySelector('[name="attributes[ギフトラッピング]"]').addEventListener("change", function (event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set({{ gift-wrap-count }});
      } 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>

{% if linklists.gift-wrapping.links.size == 0 or linklists.gift-wrapping.links.first.type != 'product_link' %}
  <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 %}

{% assign gift-wrap-count = 0 %}
{% for item in cart.items %}
  {% assign item_gift_wrap_count = 0 %}
  {% for property in item.properties %}
    {% if property[0] == 'ギフトラッピング' and property[1] == '希望する' %}
      {% assign item_gift_wrap_count = item.quantity %}
    {% endif %}
  {% endfor %}
  {% assign gift-wrap-count = gift-wrap-count | plus: item_gift_wrap_count %}
{% endfor %}

{% assign gift_wraps_in_cart = 0 %}
{% assign gift_wrap_product_id = linklists.gift-wrapping.links.first.object.variants.first.id %}

{% for item in cart.items %}
  {% if item.id == gift_wrap_product_id %}
    {% assign gift_wraps_in_cart = item.quantity %}
  {% endif %}
{% endfor %}

{% if gift-wrap-count > 0 %}
  <input id="gift-wrapping" type="hidden" name="attributes[ギフトラッピング]" value="yes" checked="checked" />
{% endif %}