在 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' %}

{% 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' %}

{% 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: 可以使用上文提供的第一段代码,其中设置了一个固定的礼品包装费用。