127
在 Shopify 商城中为顾客提供礼品包装服务是一个非常常见的需求。本文将详细介绍如何在 Shopify 后台创建礼品包装选项代码片段,并将其添加到购物车模板中。
创建代码片段
要为礼品包装选项创建代码片段,请按以下步骤操作:
PC端:
1. 登录 Shopify 后台,进入"在线商店 > 模板"。
2. 找到需要编辑的模板,点击"操作 > 编辑代码"。
3. 在"Snippets"目录中点击"添加新片段"。
4. 将代码片段命名为"gift-wrapping",然后点击"创建代码片段"。代码片段文件将在编辑器中打开。
5. 在这一步中,您需要将相应的代码粘贴到新创建的"gift-wrapping"代码片段文件中。具体代码取决于您希望如何收取礼品包装服务费用。
移动端:
1. 打开 Shopify 应用,点击"商店"。
2. 在"销售渠道"部分,点击"在线商店"。
3. 点击"管理模板"。
4. 找到需要编辑的模板,点击"操作 > 编辑代码"。
5. 在"Snippets"目录中点击"添加新片段"。
6. 将代码片段命名为"gift-wrapping",然后点击"创建代码片段"。代码片段文件将在编辑器中打开。
7. 在这一步中,您需要将相应的代码粘贴到新创建的"gift-wrapping"代码片段文件中。具体代码取决于您希望如何收取礼品包装服务费用。
添加固定费率
如果您希望为礼品包装服务收取固定费率,可以粘贴以下代码并保存:
```liquid
{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %}
<input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %}checked="checked"{% endif %} style="float:none" />
<textarea name="attributes[gift-note]" id="gift-note">{{ cart.attributes.gift-note }}</textarea>
{% 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>
[removed]
Shopify.Cart = Shopify.Cart || {};
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'; });
},
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);
});
});
[removed]
{% else %}
You attempted to add a gift-wrapping script to your shopping cart, but it won't work because you don't have a linklist with handle code "gift-wrapping" which, in turn, contains a link to your gift-wrapping product. Please review the steps outlined here.
{% endif %}
```
基于产品数量计算费用
使用此选项时,如果订单中有三件产品,则礼品包装费用将乘以 3。您可以粘贴以下代码并保存:
```liquid
{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %}
<input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %}checked="checked"{% endif %} style="float:none" />
<textarea name="attributes[gift-note]" id="gift-note">{{ cart.attributes.gift-note }}</textarea>
{% 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>
[removed]
Shopify.Cart = Shopify.Cart || {};
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'; });
},
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);
});
});
{% else %}
You attempted to add a gift-wrapping script to your shopping cart, but it won't work because you don't have a linklist with handle code "gift-wrapping" which, in turn, contains a link to your gift-wrapping product. Please review the steps outlined here.
{% endif %}
```
在购物车模板中包含代码片段
要在购物车模板中包括礼品包装代码片段,请执行以下操作:
1. 在"Sections"目录中,点击"cart-template.liquid"。如果您的模板中没有"cart-template.liquid",则点击"Templates"目录中的"cart.liquid"。
2. 找到代码中的结束`</form>`标记。
3. 在结束`</form>`标记上方的新行中,粘贴以下代码:
```liquid
{% render 'gift-wrapping' %}
```
4. 点击"保存"。
FAQs
Q: 如何为礼品包装选项创建代码片段?
A: 在 Shopify 后台的"在线商店 > 模板"中,找到需要编辑的模板,点击"操作 > 编辑代码"。在"Snippets"目录中点击"添加新片段",将代码片段命名为"gift-wrapping"并创建。然后将相应的代码粘贴到新创建的代码片段文件中。
Q: 如何在购物车模板中包含礼品包装代码片段?
A: 在"Sections"目录中,找到"cart-template.liquid"文件(或"Templates"目录中的"cart.liquid"文件),在结束`</form>`标记上方添加`{% render 'gift-wrapping' %}`代码。
Q: 如何设置基于产品数量计算的礼品包装费用?
A: 可以使用上文提供的第二段代码,其中会根据购物车中的产品数量计算礼品包装费用。
Q: 如何设置固定的礼品包装费用?
A: 可以使用上文提供的第一段代码,其中设置了一个固定的礼品包装费用。
