向购物车页面添加礼品包装选项
已于 Jul 26, 2024 打印了此页面。若要查看当前版本,请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option。
您可以在您在线商店的购物车页面上为客户提供礼品包装服务。对于希望包装其订单的客户,您可以收取固定费率,也可以根据产品收费。
本页相关主题
创建礼品包装产品
首先,您需要将礼品包装选项创建为产品:
在 Shopify 后台中,转至产品。
点击添加产品。
创建礼品包装产品,就像创建任何其他产品一样:
- 您可以使用产品描述来说明将使用哪些材料包装礼品。
- 为礼品包装产品指定您希望针对该服务收取的价格。如果您想免费提供礼品包装服务,请将礼品包装产品的价格设置为
0
。 - 您可以上传产品的图片,以向客户展示礼品包装订单的外观。
- 请确保您的礼品包装产品包含库存,或者调整设置,以便 Shopify 不会跟踪礼品包装产品的库存。如果您的商店有多个地点,请取消选中跟踪数量,以防止 Shopify 跟踪礼品包装产品的库存。
- 点击保存。
创建菜单
接下来,创建指向礼品包装产品的菜单:
- 在 Shopify 后台中,转至在线商店 > 网站导航。
- 点击添加菜单。
- 将菜单命名为
Gift wrapping
,以便系统为菜单分配 handlegift-wrapping
。 -
将礼品包装产品添加到菜单中:
- 点击添加菜单项,然后为指向礼品包装产品的链接输入名称。
- 在链接字段中,选择产品,然后从下拉菜单中选择礼品包装产品。
- 点击添加。
点击保存菜单。
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触网站导航。
- 点击添加菜单。
- 将菜单命名为
Gift wrapping
,以便系统为菜单分配 handlegift-wrapping
。 -
将礼品包装产品添加到菜单中:
- 点击添加菜单项,然后为指向礼品包装产品的链接输入名称。
- 在链接字段中,选择产品,然后从下拉菜单中选择礼品包装产品。
- 点击添加。
点击保存菜单。
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触网站导航。
- 点击添加菜单。
- 将菜单命名为
Gift wrapping
,以便系统为菜单分配 handlegift-wrapping
。 -
将礼品包装产品添加到菜单中:
- 点击添加菜单项,然后为指向礼品包装产品的链接输入名称。
- 在链接字段中,选择产品,然后从下拉菜单中选择礼品包装产品。
- 点击添加。
点击保存菜单。
创建代码片段
- 在 Shopify 后台中,转至在线商店 > 模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将您的代码片段命名为
gift-wrapping
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。 - 在此步骤中,您需要将一些代码粘贴到新的
gift-wrapping
代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用:
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触管理模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将您的代码片段命名为
gift-wrapping
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。 - 在此步骤中,您需要将一些代码粘贴到新的
gift-wrapping
代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用:
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触管理模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将您的代码片段命名为
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。粘贴以下代码并保存:
{% 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 %}
在购物车模板中包含代码片段
若要在购物车模板中包括礼品包装代码片段,请执行以下操作:
在 Sections 目录中,点击
cart-template.liquid
。如果您的模板中没有cart-template.liquid
,请点击 Templates 目录中的cart.liquid
。查找代码中的结束
</form>
标记。在结束</form>
标记上方的新行中,粘贴以下代码:
{% render 'gift-wrapping' %}
- 点击保存。