shopify为购物车礼品包装选项创建代码片段步骤-ESG跨境

创建代码片段

若要为礼品包装选项创建代码片段，请执行以下操作：

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 将您的代码片段命名为 gift-wrapping，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。

3. 在此步骤中，您需要将一些代码粘贴到新的 gift-wrapping 代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用：

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 将您的代码片段命名为 gift-wrapping，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。

3. 在此步骤中，您需要将一些代码粘贴到新的 gift-wrapping 代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用：

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Snippets 目录中点击添加新片段。

2. 将您的代码片段命名为 gift-wrapping，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。

3. 在此步骤中，您需要将一些代码粘贴到新的 gift-wrapping 代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用：

为礼品包装添加固定费率

粘贴以下代码并保存：

{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %} <div          >   <p>     <input              type="checkbox"       name="attributes[gift-wrapping]"       value="yes"       {% if cart.attributes.gift-wrapping %}       checked="checked"       {% endif %}            />     <label       fo            >       For {{ linklists.gift-wrapping.links.first.object.price | money }}       please wrap the products in this order.     </label>   </p>   <p>     <label  fo       >Gift message (free and optional):</label     >     <textarea name="attributes[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  >   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          >   <p>     <input              type="checkbox"       name="attributes[gift-wrapping]"       value="yes"       {% if cart.attributes.gift-wrapping %}       checked="checked"       {% endif %}            />     <label       fo            >       For {{ linklists.gift-wrapping.links.first.object.price | money }} per       item, please wrap the products in this order.     </label>   </p>   <p>     <label  fo       >Gift message (free and optional):</label     >     <textarea name="attributes[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  >   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 %}

在模板中包含代码片段

若要在购物车模板中包括礼品包装代码片段，请执行以下操作：

1. 在 Sections 目录中，点击 cart-template.liquid。如果您的模板中没有 cart-template.liquid，请点击 Templates 目录中的 cart.liquid。

2. 查找代码中的结束 </form> 标记。在结束 </form> 标记上方的新行中，粘贴以下代码：

{% render 'gift-wrapping' %}

1. 点击保存。

Create a code snippet

To create a code snippet for the gift-wrap option:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet gift-wrapping and click Create snippet. Your snippet file will open in the code editor.

3. In this step, you will paste some code into your new gift-wrapping snippet file. The code you paste depends on how you want to charge your s for the gift wrapping service:

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet gift-wrapping and click Create snippet. Your snippet file will open in the code editor.

3. In this step, you will paste some code into your new gift-wrapping snippet file. The you paste depends on how you want to charge your customers for the gift wrapping service:

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet gift-wrapping and click Create snippet. Your snippet file will open in the code editor.

3. In this step, you will paste some code into your new gift-wrapping snippet file. The code you paste depends on how you want to charge your customers for the gift wrapping service:

1. Add a flat rate charge for gift wrapping

   Paste the following code and Save:

   {% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %} <div          >   <p>     <input              type="checkbox"       name="attributes[gift-wrapping]"       value="yes"       {% if cart.attributes.gift-wrapping %}       checked="checked"       {% endif %}            />     <label       fo            >       For {{ linklists.gift-wrapping.links.first.object.price | money }}       please wrap the products in this order.     </label>   </p>   <p>     <label  fo       >Gift message (free and optional):</label     >     <textarea name="attributes[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  >   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</co
   特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。