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

shopify为购物车礼品包装选项创建代码片段步骤核心内容

创建代码片段若要为礼品包装选项创建代码片段，请执行以下操作：PC：在 Shopify 后台中，转到在线商店>模板。找到要编辑的模板，然后点击操作>编辑代码。在Snippets目录中点击添加

shopify为购物车礼品包装选项创建代码片段步骤正文

创建代码片段

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

PC：

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

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

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

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

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

苹果系统：

在Shopify 应用中，轻触商店。

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

轻触Manage themes（管理模板）。

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

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

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

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

安卓系统：

在Shopify 应用中，轻触商店。

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

轻触Manage themes（管理模板）。

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

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

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

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

为礼品包装添加固定费率

粘贴以下代码并保存：

{%iflinklists.gift-wrapping.links.size>0andlinklists.gift-wrapping.links.first.type=='product_link'%}<divid="is-a-gift"style="clear:left;margin:30px0"class="clearfixrte"><p><inputid="gift-wrapping"type="checkbox"name="attributes[gift-wrapping]"value="yes"{%ifcart.attributes.gift-wrapping%}checked="checked"{%endif%}style="float:none"/><labelfor="gift-wrapping"style="display:inline;padding-left:5px;float:none;">For{{linklists.gift-wrapping.links.first.object.price|money}}pleasewraptheproductsinthisorder.</label></p><p><labelstyle="display:block"for="gift-note">Giftmessage(freeandoptional):</label><textareaname="attributes[gift-note]"id="gift-note">{{cart.attributes.gift-note}}</textarea></p></div>{%assignid=linklists.gift-wrapping.links.first.object.variants.first.id%}{%assigngift_wraps_in_cart=0%}{%foritemincart.items%}{%ifitem.id==id%}{%assigngift_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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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';});}//Ifwehavenothingbutgift-wrapitemsinthecart.{%ifcart.items.size==1andgift_wraps_in_cart>0%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.remove();});//Ifwehavemorethanonegift-wrapiteminthecart.{%elsifgift_wraps_in_cart>1%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehaveagift-wrapiteminthecartbutourgift-wrappingcartattributehasnotbeenset.{%elsifgift_wraps_in_cart>0andcart.attributes.gift-wrapping==blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehavenogift-wrapiteminthecartbutourgift-wrappingcartattributehasbeenset.{%elsifgift_wraps_in_cart==0andcart.attributes.gift-wrapping!=blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});{%endif%}//Whenthegift-wrappingcheckboxischeckedorunchecked.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){varnote=evt.target.value;varheaders=newHeaders({'Content-Type':'application/json'});varrequest={method:'POST',headers:headers,body:JSON.stringify({attributes:{'gift-note':note}})};fetch('/cart/update.js',request);});});</script>{%else%}<pstyle="clear:left;margin:30px0"class="rte">Youattemptedtoaddagift-wrappingscripttoyourshoppingcart,butitwon'tworkbecauseyoudon'thavealinklistwithhandle<code>gift-wrapping</code>which,inturn,containsalinktoyourgift-wrappingproduct.Pleasereviewthestepsoutlined<ahref="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"target="_blank"rel="noopenernoreferrernofollow">here</a>.</p>{%endif%}

添加费用并乘以订单中的产品数

使用此选项时，如果订单有三件产品，则礼品包装费用将乘以 3。粘贴以下代码并保存：

{%iflinklists.gift-wrapping.links.size>0andlinklists.gift-wrapping.links.first.type=='product_link'%}<divid="is-a-gift"style="clear:left;margin:30px0"class="clearfixrte"><p><inputid="gift-wrapping"type="checkbox"name="attributes[gift-wrapping]"value="yes"{%ifcart.attributes.gift-wrapping%}checked="checked"{%endif%}style="float:none"/><labelfor="gift-wrapping"style="display:inline;padding-left:5px;float:none;">For{{linklists.gift-wrapping.links.first.object.price|money}}peritem,pleasewraptheproductsinthisorder.</label></p><p><labelstyle="display:block"for="gift-note">Giftmessage(freeandoptional):</label><textareaname="attributes[gift-note]"id="gift-note">{{cart.attributes.gift-note}}</textarea></p></div>{%assignid=linklists.gift-wrapping.links.first.object.variants.first.id%}{%assigngift_wraps_in_cart=0%}{%foritemincart.items%}{%ifitem.id==id%}{%assigngift_wraps_in_cart=item.quantity%}{%endif%}{%endfor%}{%assignitems_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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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';});}//Ifwehavenothingbutgift-wrapitemsinthecart.{%ifcart.items.size==1andgift_wraps_in_cart>0%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.remove();});//Ifwedon'thavetherightamountofgift-wrapitemsinthecart.{%elsifgift_wraps_in_cart>0andgift_wraps_in_cart!=items_in_cart%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehaveagift-wrapiteminthecartbutourgift-wrappingcartattributehasnotbeenset.{%elsifgift_wraps_in_cart>0andcart.attributes.gift-wrapping==blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehavenogift-wrapiteminthecartbutourgift-wrappingcartattributehasbeenset.{%elsifgift_wraps_in_cart==0andcart.attributes.gift-wrapping!=blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});{%endif%}//Whenthegift-wrappingcheckboxischeckedorunchecked.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){varnote=evt.target.value;varheaders=newHeaders({'Content-Type':'application/json'});varrequest={method:'POST',headers:headers,body:JSON.stringify({attributes:{'gift-note':note}})};fetch('/cart/update.js',request);});});</script>{%else%}<pstyle="clear:left;margin:30px0"class="rte">Youattemptedtoaddagift-wrappingscripttoyourshoppingcart,butitwon'tworkbecauseyoudon'thavealinklistwithhandle<code>gift-wrapping</code>which,inturn,containsalinktoyourgift-wrappingproduct.Pleasereviewthestepsoutlined<ahref="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"target="_blank"rel="noopenernoreferrernofollow">here</a>.</p>{%endif%}

在购物车模板中包含代码片段

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

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

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

{%render'gift-wrapping'%}

点击保存。

Shopify商户官网原文详情：

Create a code snippet

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

PC：

From your Shopify admin, go toOnline Store>Themes.

Find the theme you want to edit, and then clickActions>Edit code.

In theSnippetsdirectory, clickAdd a new snippet.

Name your snippetgift-wrappingand clickCreate snippet. Your snippet file will open in the code editor.

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

iPhone：

From theShopify app, tapStore.

In theSales channelssection, tapOnline Store.

TapManage themes.

Find the theme you want to edit, and then clickActions>Edit code.

In theSnippetsdirectory, clickAdd a new snippet.

Name your snippetgift-wrappingand clickCreate snippet. Your snippet file will open in the code editor.

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

Android：

From theShopify app, tapStore.

In theSales channelssection, tapOnline Store.

TapManage themes.

Find the theme you want to edit, and then clickActions>Edit code.

In theSnippetsdirectory, clickAdd a new snippet.

Name your snippetgift-wrappingand clickCreate snippet. Your snippet file will open in the code editor.

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

Add a flat rate charge for gift wrapping

Paste the following code andSave:

{%iflinklists.gift-wrapping.links.size>0andlinklists.gift-wrapping.links.first.type=='product_link'%}<divid="is-a-gift"style="clear:left;margin:30px0"class="clearfixrte"><p><inputid="gift-wrapping"type="checkbox"name="attributes[gift-wrapping]"value="yes"{%ifcart.attributes.gift-wrapping%}checked="checked"{%endif%}style="float:none"/><labelfor="gift-wrapping"style="display:inline;padding-left:5px;float:none;">For{{linklists.gift-wrapping.links.first.object.price|money}}pleasewraptheproductsinthisorder.</label></p><p><labelstyle="display:block"for="gift-note">Giftmessage(freeandoptional):</label><textareaname="attributes[gift-note]"id="gift-note">{{cart.attributes.gift-note}}</textarea></p></div>{%assignid=linklists.gift-wrapping.links.first.object.variants.first.id%}{%assigngift_wraps_in_cart=0%}{%foritemincart.items%}{%ifitem.id==id%}{%assigngift_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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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';});}//Ifwehavenothingbutgift-wrapitemsinthecart.{%ifcart.items.size==1andgift_wraps_in_cart>0%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.remove();});//Ifwehavemorethanonegift-wrapiteminthecart.{%elsifgift_wraps_in_cart>1%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehaveagift-wrapiteminthecartbutourgift-wrappingcartattributehasnotbeenset.{%elsifgift_wraps_in_cart>0andcart.attributes.gift-wrapping==blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehavenogift-wrapiteminthecartbutourgift-wrappingcartattributehasbeenset.{%elsifgift_wraps_in_cart==0andcart.attributes.gift-wrapping!=blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});{%endif%}//Whenthegift-wrappingcheckboxischeckedorunchecked.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){varnote=evt.target.value;varheaders=newHeaders({'Content-Type':'application/json'});varrequest={method:'POST',headers:headers,body:JSON.stringify({attributes:{'gift-note':note}})};fetch('/cart/update.js',request);});});</script>{%else%}<pstyle="clear:left;margin:30px0"class="rte">Youattemptedtoaddagift-wrappingscripttoyourshoppingcart,butitwon'tworkbecauseyoudon'thavealinklistwithhandle<code>gift-wrapping</code>which,inturn,containsalinktoyourgift-wrappingproduct.Pleasereviewthestepsoutlined<ahref="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"target="_blank"rel="noopenernoreferrernofollow">here</a>.</p>{%endif%}

Add a charge that is multiplied by the number of products in the order

With this option, if there are three products in the order, then the gift wrap charge will be multiplied by three. Paste the following code andSave:

{%iflinklists.gift-wrapping.links.size>0andlinklists.gift-wrapping.links.first.type=='product_link'%}<divid="is-a-gift"style="clear:left;margin:30px0"class="clearfixrte"><p><inputid="gift-wrapping"type="checkbox"name="attributes[gift-wrapping]"value="yes"{%ifcart.attributes.gift-wrapping%}checked="checked"{%endif%}style="float:none"/><labelfor="gift-wrapping"style="display:inline;padding-left:5px;float:none;">For{{linklists.gift-wrapping.links.first.object.price|money}}peritem,pleasewraptheproductsinthisorder.</label></p><p><labelstyle="display:block"for="gift-note">Giftmessage(freeandoptional):</label><textareaname="attributes[gift-note]"id="gift-note">{{cart.attributes.gift-note}}</textarea></p></div>{%assignid=linklists.gift-wrapping.links.first.object.variants.first.id%}{%assigngift_wraps_in_cart=0%}{%foritemincart.items%}{%ifitem.id==id%}{%assigngift_wraps_in_cart=item.quantity%}{%endif%}{%endfor%}{%assignitems_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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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(){varheaders=newHeaders({'Content-Type':'application/json'});varrequest={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';});}//Ifwehavenothingbutgift-wrapitemsinthecart.{%ifcart.items.size==1andgift_wraps_in_cart>0%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.remove();});//Ifwedon'thavetherightamountofgift-wrapitemsinthecart.{%elsifgift_wraps_in_cart>0andgift_wraps_in_cart!=items_in_cart%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehaveagift-wrapiteminthecartbutourgift-wrappingcartattributehasnotbeenset.{%elsifgift_wraps_in_cart>0andcart.attributes.gift-wrapping==blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});//Ifwehavenogift-wrapiteminthecartbutourgift-wrappingcartattributehasbeenset.{%elsifgift_wraps_in_cart==0andcart.attributes.gift-wrapping!=blank%}document.addEventListener("DOMContentLoaded",function(){Shopify.Cart.GiftWrap.set();});{%endif%}//Whenthegift-wrappingcheckboxischeckedorunchecked.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){varnote=evt.target.value;varheaders=newHeaders({'Content-Type':'application/json'});varrequest={method:'POST',headers:headers,body:JSON.stringify({attributes:{'gift-note':note}})};fetch('/cart/update.js',request);});});</script>{%else%}<pstyle="clear:left;margin:30px0"class="rte">Youattemptedtoaddagift-wrappingscripttoyourshoppingcart,butitwon'tworkbecauseyoudon'thavealinklistwithhandle<code>gift-wrapping</code>which,inturn,containsalinktoyourgift-wrappingproduct.Pleasereviewthestepsoutlined<ahref="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"target="_blank"rel="noopenernoreferrernofollow">here</a>.</p>{%endif%}

Include the snippet in your cart template

To include the gift-wrapping snippet in your cart template:

In theSectionsdirectory, clickcart-template.liquid. If your theme doesn't have acart-template.liquid, then clickcart.liquidin theTemplatesdirectory.

Findthe closing</form>tag in the code. On a new line above the closing</form>tag, paste the following code:

{%render'gift-wrapping'%}

ClickSave.

文章内容来源：Shopify商户官方网站