เพิ่มตัวเลือกการห่อของขวัญลงในหน้าตะกร้าสินค้าของคุณ
คุณสามารถเสนอบริการห่อของขวัญให้กับลูกค้าได้ในหน้าตะกร้าสินค้าในร้านค้าออนไลน์ของคุณ สำหรับลูกค้าที่ต้องการห่อสินค้าของพวกเขา คุณสามารถเรียกเก็บค่าบริการในอัตราค่าจัดส่งตายตัวหรือเรียกเก็บค่าบริการต่อรายการสินค้าได้
สร้างสินค้าห่อของขวัญ
ก่อนอื่นคุณจะต้องสร้างตัวเลือกการห่อของขวัญเป็นสินค้า:
ในส่วนผู้ดูแล 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' %}
- คลิกที่ “บันทึก”