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

October 29, 2020

A customer who purchases through your Shopify store wants to gift wrap it for a birthday or celebration. It is very common for customers to want to gift wrap a birthday or celebration.

Let's use the app to add gift wrapping! However, I still have the impression that many clients feel that they would like to be particular about the selection method and display of gift wrapping.

To answer such requests, we will introduce how to add gift wrapping. Since this is only a basic section, this article is intended for those who are able to modify the design and functionality somewhat. (Note that this cannot be implemented with a pop-up cart, but only with a separate cart page.)

The specific steps are

Add gift wrap products
Add a menu for gift wrap
Create code snippet
Embed the snippet in the cart

The following is a brief description of the process. We will explain them in order, so don't worry.

Step 1: Adding a gift wrap product

First, add a "gift wrap" product in the same way as for general products.

Admin → Product Management → Add Product

If you want to put a price on the gift wrapping itself, set it as the product price. If you wish to use free wrapping, simply set the product price to 0 yen.

If you have uploaded and set the product image, the image will be displayed in the wrapped product section in the cart. If the inventory is 0, you will not be able to add wrapped products to the cart, so you will need to increase the inventory level or set the product to be available for sale regardless of the inventory level.

Step 2: Create a menu from the management screen

Next, create a menu for gift wrapping from the administration screen.

Admin → Online Store → Menu → Add Menu

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

When you add this menu, the menu title should be "Gift wrapping". And make sure the handle is "gift-wrapping".

Next, add a menu item.

Enter a title such as "Gift wrapping" and select the gift wrapping item you just created in the "Link" drop-down.

Step 3: Create a code snippet for gift wrapping

Once the above has been set up, it is time to start editing the code.

To add only one gift-wrapped product

{% 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', head

ers

: headers,
body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true })
}
)
};
fetch('/cart/update.js', request)
.then(function() {
location.href="/en/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="/en/cart";
});
}

// If we have nothing but
gift-wrapped
items in the 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.
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', head

ers

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

To add gift-wrapped items to the number of items in the cart

{% 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
<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="/en/cart";
});
}

Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST', head

ers

: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' })
}
)
};
fetch('/cart/update.js', request)
.then(function() {
location.href="/en/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.
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', head

ers

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

Code borrowed from the official Shopify tutorial below

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

Then, create and save the above code of your choice as new snippets.

In this case, for example, we will save it as "gift-wrap.liquid". The English part needs to be changed to Japanese.

Step 4: Embed the snippet in the cart page

Now that the snippet is embedded, it will be possible to add gift wrap items in the cart screen.

To embed, place the snippet in the cart screen (cart.liquid or cart-template.liquid) before the </form> form closing tag

{% include "gift-wrap" %}

to complete the embedding.

If you saved the new snippets with a name other than "gift-wrap.liquid", put the name of the file in "".

How to implement additional gift wrapping on the Shopify cart screen Summary

This is how to add gift wrapping.

The wrapping feature is important for the Christmas season, birthdays, and other events. We can also support wrapping for a fee by adding a price to the wrapped product itself.

Thank you for reading to the end.
Have a great day!