shopify為購(gòu)物車禮品包裝選項(xiàng)創(chuàng)建代碼片段步驟-ESG跨境

創(chuàng)建代碼片段

若要為禮品包裝選項(xiàng)創(chuàng)建代碼片段，請(qǐng)執(zhí)行以下操作：

PC：

1. 在 Shopify 后臺(tái)中，轉(zhuǎn)到在線商店 > 模板。

2. 找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

1. 在 Snippets 目錄中點(diǎn)擊添加新片段。

2. 將您的代碼片段命名為 gift-wrapping，然后點(diǎn)擊創(chuàng)建代碼片段。您的代碼片段文件將在代碼編輯器打開。

3. 在此步驟中，您需要將一些代碼粘貼到新的 gift-wrapping 代碼片段文件中。您粘貼的代碼取決于您要如何向客戶收取禮品包裝服務(wù)的費(fèi)用：

蘋果系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分中，輕觸在線商店。

3. 輕觸 Manage themes（管理模板）。

4. 找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

1. 在 Snippets 目錄中點(diǎn)擊添加新片段。

2. 將您的代碼片段命名為 gift-wrapping，然后點(diǎn)擊創(chuàng)建代碼片段。您的代碼片段文件將在代碼編輯器打開。

3. 在此步驟中，您需要將一些代碼粘貼到新的 gift-wrapping 代碼片段文件中。您粘貼的代碼取決于您要如何向客戶收取禮品包裝服務(wù)的費(fèi)用：

安卓系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分中，輕觸。

3. 輕觸 Manage themes（管理模板）。

4. 找到要編輯的模板，然后點(diǎn)擊操作 > 編輯代碼。

1. 在 Snippets 目錄中點(diǎn)擊添加新片段。

2. 將您的代碼片段命名為 gift-wrapping，然后點(diǎn)擊創(chuàng)建代碼片段。您的代碼片段文件將在代碼編輯器打開。

3. 在此步驟中，您需要將一些代碼粘貼到新的 gift-wrapping 代碼片段文件中。您粘貼的代碼取決于您要如何向客戶收取禮品包裝服務(wù)的費(fèi)用：

為禮品包裝添加固定費(fèi)率

粘貼以下代碼并保存：

{% 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          >here</a   >. </p> {% endif %}

添加費(fèi)用并乘以訂單中的產(chǎn)品數(shù)

使用此選項(xiàng)時(shí)，如果訂單有三件產(chǎn)品，則禮品包裝費(fèi)用將乘以 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      %}

1. 點(diǎn)擊保存。

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
   特別聲明：以上文章內(nèi)容僅代表作者本人觀點(diǎn)，不代表ESG跨境電商觀點(diǎn)或立場(chǎng)。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請(qǐng)于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。