[Shopify]カート画面にギフトラッピングを追加実装する方法 - EC PENGUIN

[Shopify]カート画面にギフトラッピングを追加実装する方法

 

Shopifyストアを通じて購入したお客様が誕生日やお祝いにギフトラッピングをしたい。と思うことはよくある話です。

そんな時にアプリを使用してギフトラッピングを追加しちゃおう!と対応できれば良いのですが、やはりクライアント様によっては、ギフトラッピングの選択方法や表示にこだわりたいと感じる方も多い印象です。

そんなご要望に答えるために、ギフトラッピング追加の方法を紹介していきます。あくまでも基礎となる部分なので、デザイン修正や機能修正が多少できる方向けの記事となっています。(ちなみにポップアップカートだと実装できなく、独立したカートページがある場合のみ実装可能ですのでご注意を。)

具体的な手順は

  1. ギフトラップ商品を追加する
  2. ギフトラップ用のメニューを追加する
  3. コードsnippetを作成する
  4. カートにsnippetを埋め込む

となっております。順に説明していきますのでご安心を。

手順①:ギフトラップ商品を追加する

まず最初に、一般的な商品と同じ要領で『ギフトラップ』商品を追加しましょう。

管理画面→商品管理→商品を追加

もしギフトラッピング自体に価格をつけたければ商品価格として設定します。無料ラッピングをご希望の方は商品価格として0円を設定しておけば大丈夫です。

そして、商品画像をアップロード・設定しておけばカート内でその画像がラッピング商品部分に表示されます。また在庫が0のままだとラッピング商品を追加できませんので、在庫数を上げておくか、在庫数に限らず販売可能にする設定にしておきましょう。

 

手順②:管理画面からメニューを作成する

次に管理画面からギフトラッピング用のメニューを作成しましょう。

管理画面→オンラインストア→メニュー→メニューを追加

Shopify メニューを追加 ギフトラッピング

このメニューを追加した際に、メニュータイトルは"Gift wrapping"にしてください。そして、ハンドル名が"gift-wrapping"になっていることをご確認ください。

次にメニューアイテムを追加します。

Gift wrappingなどのタイトルを入力し、先ほど作成したギフトラッピング商品を"リンク"のドロップダウン部分で選択します。

 

手順③:ギフトラップ用のコードスニペットを作成する

上記が設定できたら、いよいよコードの編集に入っていきます。

ギフトラッピング商品を1つだけ追加する場合

  {% 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://shopify.dev/tutorials/customize-theme-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://shopify.dev/tutorials/customize-theme-add-gift-wrap-option" target="_blank" rel="noopener noreferrer nofollow">here</a>.
</p>

{% endif %} 

 

コードは下記公式Shopifyチュートリアルより拝借

https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option

そして、上記の好みのコードを新規snippetsとして作成し、保存しましょう。 

今回は例えば"gift-wrap.liquid"で保存してみます。英語部分は日本語に変更する必要がありますね。

 

手順④:カートページにスニペットを埋め込む

これでスニペットを埋め込めば カート画面でギフトラップ商品を追加することが可能になります。

埋め込み方法としては、カート画面(cart.liquid、もしくは、cart-template.liquid)内の</form>フォーム閉じタグ前に

{% include "gift-wrap" %}

と記載すれば埋め込みが完了します。

先ほどの新規snippetsを保存した際に"gift-wrap.liquid"以外の名前で保存した場合はそのファイル名を""の中に記載します。

 

Shopifyカート画面にギフトラッピングを追加実装する方法 まとめ

 以上、ギフトラッピングを追加する方法でした。

ラッピング機能はクリスマスシーズンや誕生日等のイベントに対応していくためには、重要な機能ですね。ラッピング商品自体に価格を持たせることで有料のラッピング対応もできますので、ぜひご活用ください。

最後までお読みいただきありがとうございました。
それでは本日も良い1日を!

 

 

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら