將禮品包裝選項新增至購物車頁面
此頁面列印時間為 May 14, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option。
您可以在網路商店的購物車頁面中,向顧客提供禮品包裝服務。對於想要包裝訂單的顧客,您可以以單一費率收費,或按產品收費。
注意
此自訂程序不適用於導覽匣式或彈出式購物車樣式,且僅適用於購物車頁面 (網址為 your-store.com/cart
)。若您使用購物車導覽匣或彈出式視窗,則必須在佈景主題編輯器 中,將購物車樣式變更為「頁面 」。在佈景主題預覽中,將產品新增至購物車,然後在佈景主題編輯器中點擊「購物車頁面 」分頁,便能檢視您的購物車設定。
建立禮品包裝產品 首先,您會將禮品包裝選項建立為產品:
在 Shopify 管理介面 中,前往「產品 」。
按一下「新增商品 」。
以建立其他商品的方式 建立禮品包裝商品:
您可以使用產品說明,說明哪些材料會用於包裝這些品項。
為禮品包裝產品訂定欲收取的服務費用。如果您想要免費贈送禮品包裝,請將禮品包裝產品的價格設為 0
。
您可以上傳產品圖片,以向顧客顯示領品禮品的訂單外觀。
請確認您的禮品包裝產品包含庫存,或請調整設定讓 Shopify 不會追蹤禮品包裝產品的庫存。如果您的商店有多個地點,請取消勾選「追蹤數量 」,以防止 Shopify 追蹤禮品包裝產品的庫存。
點擊「儲存 」。
建立選單 接下來,建立指向禮品包裝產品的選單:
從 Shopify 管理介面 中,前往「線上商店 > 導覽 」。
按一下「新增選單 」。
將選單命名命名為 Gift wrapping
,這樣一來指派至該選單的控制代碼就會是 gift-wrapping
。
將禮品包裝產品新增至選單:
點擊「新增選單項目 」,然後輸入禮品包裝產品連結的名稱 。
在「連結 」欄位中,選取「產品 」,然後從下拉式選單中選取禮品包裝產品。
按一下「新增 」。
按一下「儲存選單 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「導覽」 。
按一下「新增選單 」。
將選單命名命名為 Gift wrapping
,這樣一來指派至該選單的控制代碼就會是 gift-wrapping
。
將禮品包裝產品新增至選單:
點擊「新增選單項目 」,然後輸入禮品包裝產品連結的名稱 。
在「連結 」欄位中,選取「產品 」,然後從下拉式選單中選取禮品包裝產品。
按一下「新增 」。
按一下「儲存選單 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「導覽」 。
按一下「新增選單 」。
將選單命名命名為 Gift wrapping
,這樣一來指派至該選單的控制代碼就會是 gift-wrapping
。
將禮品包裝產品新增至選單:
點擊「新增選單項目 」,然後輸入禮品包裝產品連結的名稱 。
在「連結 」欄位中,選取「產品 」,然後從下拉式選單中選取禮品包裝產品。
按一下「新增 」。
按一下「儲存選單 」。
建立程式碼片段
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 gift-wrapping
,然後點擊「建立程式碼片段 」。您的程式碼片段檔案將在程式碼編輯器中開啟。
在此步驟中,您會將一些程式碼貼上至新的程式碼片段檔案 gift-wrapping
。您貼上的程式碼取決於您要如何向顧客收取禮品包裝服務的費用:
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 gift-wrapping
,然後點擊「建立程式碼片段 」。您的程式碼片段檔案將在程式碼編輯器中開啟。
在此步驟中,您會將一些程式碼貼上至新的程式碼片段檔案 gift-wrapping
。您貼上的程式碼取決於您要如何向顧客收取禮品包裝服務的費用:
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 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 : 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 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 : 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 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
,則可以在「範本 」目錄中,點擊「cart.liquid
」。
找到 程式碼中的結束標籤 </form>
。在結束標籤 </form>
上方新的一行,貼上下列程式碼:
{% render 'gift-wrapping' %}
點擊「儲存 」。