若要为礼品包装选项创建代码片段,请执行以下操作:
PC:
gift-wrapping
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。gift-wrapping
代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用:苹果系统:
gift-wrapping
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。gift-wrapping
代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用:安卓系统:
gift-wrapping
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。gift-wrapping
代码片段文件中。您粘贴的代码取决于您要如何向客户收取礼品包装服务的费用:粘贴以下代码并保存:
{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %} <div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte" > <p> <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked" {% endif %} style="float: none" /> <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;" > For {{ linklists.gift-wrapping.links.first.object.price | money }} please wrap the products in this order. </label> </p> <p> <label style="display:block" for="gift-note" >Gift message (free and optional):</label > <textarea name="attributes[gift-note]" id="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: ***ON.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: ***ON.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: ***ON.stringify({ attributes: { 'gift-note': note } }) }; fetch('/cart/update.js', request); }); }); </script> {% else %} <p style="clear: left; margin: 30px 0" class="rte"> 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 id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte" > <p> <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked" {% endif %} style="float: none" /> <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;" > For {{ linklists.gift-wrapping.links.first.object.price | money }} per item, please wrap the products in this order. </label> </p> <p> <label style="display:block" for="gift-note" >Gift message (free and optional):</label > <textarea name="attributes[gift-note]" id="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: ***ON.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: ***ON.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: ***ON.stringify({ attributes: { 'gift-note': note } }) }; fetch('/cart/update.js', request); }); }); </script> {% else %} <p style="clear: left; margin: 30px 0" class="rte"> 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 %}
若要在购物车模板中包括礼品包装代码片段,请执行以下操作:
cart-template.liquid
。如果您的模板中没有 cart-template.liquid
,请点击 Templates 目录中的 cart.liquid
。</form>
标记。在结束 </form>
标记上方的新行中,粘贴以下代码:{% render 'gift-wrapping' %}
Shopify商户官网原文详情:
To create a code snippet for the gift-wrap option:
PC:
gift-wrapping
and click Create snippet. Your snippet file will open in the code editor.gift-wrapping
snippet file. The code you paste depends on how you want to charge your customers for the gift wrapping service:iPhone:
gift-wrapping
and click Create snippet. Your snippet file will open in the code editor.gift-wrapping
snippet file. The code you paste depends on how you want to charge your customers for the gift wrapping service:Android:
gift-wrapping
and click Create snippet. Your snippet file will open in the code editor.gift-wrapping
snippet file. The code you paste depends on how you want to charge your customers for the gift wrapping service:{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %} <div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte" > <p> <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked" {% endif %} style="float: none" /> <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;" > For {{ linklists.gift-wrapping.links.first.object.price | money }} please wrap the products in this order. </label> </p> <p> <label style="display:block" for="gift-note" >Gift message (free and optional):</label > <textarea name="attributes[gift-note]" id="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: ***ON.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: ***ON.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: ***ON.stringify({ attributes: { 'gift-note': note } }) }; fetch('/cart/update.js', request); }); }); </script> {% else %} <p style="clear: left; margin: 30px 0" class="rte"> 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 %}
{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %} <div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte" > <p> <input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked" {% endif %} style="float: none" /> <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;" > For {{ linklists.gift-wrapping.links.first.object.price | money }} per item, please wrap the products in this order. </label> </p> <p> <label style="display:block" for="gift-note" >Gift message (free and optional):</label > <textarea name="attributes[gift-note]" id="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: ***ON.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: ***ON.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: ***ON.stringify({ attributes: { 'gift-note': note } }) }; fetch('/cart/update.js', request); }); }); </script> {% else %} <p style="clear: left; margin: 30px 0" class="rte"> 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 %}
To include the gift-wrapping snippet in your cart template:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then click cart.liquid
in the Templates directory.</form>
tag in the code. On a new line above the closing </form>
tag, paste the following code:{% render 'gift-wrapping' %}
文章内容来源:Shopify商户官方网站