การแก้ไขหรือการลบปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัว
ปุ่มซื้อและตะกร้าสินค้าจะถูกสร้างขึ้นจากชุดโค้ดที่คุณคัดลอกมาจากส่วนผู้ดูแล Shopify และวางลงในแหล่งที่มา HTML ของเว็บเพจ ชุดโค้ดเหล่านี้จะเรียกว่าโค้ดฝังตัว หากคุณต้องการเปลี่ยนลักษณะหรือลักษณะการทำงานของปุ่มหรือตะกร้าสินค้า คุณต้องแก้ไขโค้ดฝังตัวที่เกี่ยวข้อง
ในหน้านี้
ลบปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว
ขั้นตอน:
- เปิดแหล่งที่มาของ HTML ของเว็บเพจที่มีปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว
- ลบโค้ดฝังตัวทั้งหมดออกจากแหล่งที่มา HTML โดยเริ่มจาก
<script data-shopify-buy-ui>และลงท้ายด้วย</script>สำหรับปุ่มซื้อ โค้ดฝังตัวจะมีลักษณะดังต่อไปนี้:
<script data-shopify-buy-ui>
var scriptURL = "https://cndurl.com/buy-button-storefront.js";
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
apiKey: 'your-api-key',
domain: 'your-store.myshopify.com',
appId: '6'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});
}
</script>- บันทึกการเปลี่ยนแปลง
ปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัวจะไม่ปรากฏบนเว็บเพจของคุณอีกต่อไป
แก้ไขปุ่มซื้อ
หากต้องการเปลี่ยนรูปลักษณ์หรือการตั้งค่าของปุ่มซื้อที่มีอยู่ คุณจำเป็นต้องแก้ไขโค้ดฝังตัวที่คุณได้เพิ่มไปยังแหล่งที่มา HTML ของคุณ
ปุ่มซื้อแต่ละปุ่มถูกสร้างจากส่วนประกอบที่แยกกันในโค้ดฝังตัว ตัวอย่างเช่น หากคุณเพิ่มสินค้าด้วยตะกร้าสินค้าไปยังเว็บเพจของคุณ จากนั้นโค้ดฝังตัวจะสร้างส่วนประกอบproduct ส่วนประกอบcart และส่วนประกอบตะกร้าสินค้าtoggle :
หากคุณต้องการให้องค์ประกอบสินค้าของคุณเปิดหน้าต่างโมดอลที่มีรายละเอียดสินค้า โค้ดฝังตัวจะสร้างองค์ประกอบmodal และองค์ประกอบmodalProduct : 
ในโค้ดส่วนย่อยต่อไปนี้ จะมีองค์ประกอบแยกสำหรับproduct และcart:
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});องค์ประกอบเหล่านี้มีการกำหนดค่าแยกกันผ่านการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัว คุณสามารถเปลี่ยนแปลงคุณลักษณะหรือพฤติกรรมของปุ่มซื้อของคุณได้โดยการแก้ไขกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัว
แต่ละองค์ประกอบมีหลายคุณสมบัติที่คุณสามารถแก้ไขได้ สำหรับรายการทั้งหมดของตัวเลือกที่แก้ไขได้ ดูเอกสารสำหรับผู้พัฒนาของเรา หากคุณต้องการกำหนดค่าตัวเลือกที่ไม่ปรากฏในโค้ดฝังตัวของคุณ คุณจำเป็นต้องเพิ่มคีย์ที่เหมาะสมไปยังอ็อบเจกต์ที่เหมาะสม (ดูตัวอย่าง)
แก้ไขรูปแบบขององค์ประกอบ
แต่ละองค์ประกอบมีการกำหนดค่าอ็อบเจกต์ซ้อนstyles ซึ่งคุณสามารถแก้ไขหรือเพิ่มเพื่อเปลี่ยนแปลงลักษณะของส่วนประกอบได้ รูปแบบเหล่านี้ได้รับการจัดรูปแบบคล้ายกับCSS แต่ละคีย์ระดับบนสุดในอ็อบเจกต์styles จะแสดงองค์ประกอบในส่วนประกอบ เช่น ชื่อหรือปุ่ม ในอ็อบเจกต์นี้ แต่ละคีย์จะเป็นคุณสมบัติของ CSS (เช่น 'สีพื้นหลัง ' หรือ ' ขอบ ') และค่าจะเป็นค่า CSS
options: {
product: {
styles: {
button: {
'background-color': 'red',
'border-radius': '5px'
}
}
}
}สามารถเพิ่มคุณสมบัติของ CSS ที่ใช้งานได้ที่styles โปรดทราบว่าชื่อของคุณสมบัติที่มีขีดต้องอยู่ในเครื่องหมายคำพูด
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง CSS ดูที่เอกสารสำหรับผู้พัฒนา
ตัวอย่าง: แทนที่ลิงก์ไปยังตะกร้าสินค้าด้วยโมดอลรายละเอียดสินค้า
ในตัวอย่างนี้ คุณสามารถเปลี่ยนแปลงโค้ดฝังตัวปัจจุบันของคุณเพื่อนำลูกค้าของคุณไปยังโมดอลรายละเอียดสินค้าแทนตะกร้าสินค้าได้:
- เปิด HTML ของหน้าที่มีสินค้าแบบฝังตัวที่คุณต้องการเปลี่ยนแปลง
- ค้นหาการกำหนดค่าอ็อบเจกต์
product - ค้นหาคีย์
buttonDestinationในอ็อบเจกต์:
options: {
product: {
buttonDestination: 'cart'
}
}- เปลี่ยนค่าของคีย์นั้นเป็น
'modal'(ตรวจสอบให้แน่ใจว่าคุณรวมเครื่องหมายคำพูดด้วย):
options: {
product: {
buttonDestination: 'modal'
}
}- บันทึกการเปลี่ยนแปลง
ตัวอย่าง: เปลี่ยนเลย์เอาต์ของสินค้าแบบฝังตัวของคุณ
ในตัวอย่างนี้ คุณสามารถเปลี่ยนเลย์เอาต์ของสินค้าแบบฝังตัวเพื่อให้รูปภาพปรากฏที่ด้านข้างแทนด้านบน:
- เปิด HTML ของหน้าที่มีสินค้าแบบฝังตัวที่คุณต้องการเปลี่ยนแปลง
- ค้นหาการกำหนดค่าอ็อบเจกต์
product - เพิ่มคีย์
layoutแล้วตั้งค่าเป็น'horizontal':
options: {
product: {
buttonDestination: 'modal',
layout: 'horizontal'
}
}<aside class="note">
<h4>หมายเหตุ</h4>
<p>When you add the <code>'horizontal'</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>- บันทึกการเปลี่ยนแปลง
แก้ไขตะกร้าสินค้าของเว็บไซต์ของคุณ
หากคุณต้องการเปลี่ยนคุณลักษณะหรือพฤติกรรมของตะกร้าสินค้าของเว็บไซต์ คุณจำเป็นต้องcart แก้ไขการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัวของคุณ
ขั้นตอน:
- เปิด HTML ของหน้าที่มีตะกร้าสินค้าที่คุณต้องการแก้ไข
- ค้นหาการกำหนดค่าอ็อบเจกต์ในโค้ดฝังตัวของคุณ:
cart
options: {
cart: {
startOpen: false
}
}- แก้ไขหรือเพิ่มคุณสมบัติที่คุณต้องการเปลี่ยนแปลง หากต้องการดูรายการเต็มของคุณสมบัติที่กำหนดค่าได้ ให้ดูที่เอกสารสำหรับผู้พัฒนา
- บันทึกการเปลี่ยนแปลง
แก้ไขคอลเลกชันแบบฝังตัว
การแก้ไขคอลเลกชันแบบฝังตัวจะคล้ายกับการแก้ไขสินค้าหรือตะกร้าสินค้า หากต้องการแก้ไขคุณสมบัติของสินค้าภายในคอลเลกชัน (ตัวอย่างเช่น เลย์เอาต์ของสินค้าแต่ละชิ้น) คุณจำเป็นต้องหาการกำหนดค่าอ็อบเจกต์product และแก้ไขในลักษณะเดียวกับที่คุณแก้ไขสินค้าแบบฝังตัว หากต้องการแก้ไขคุณสมบัติของคอลเลกชัน (ตัวอย่างเช่น ข้อความของปุ่มหน้าถัดไป) ให้แก้ไขคีย์ productSet แทน
คุณสมบัติบางอย่าง เช่น ข้อความขององค์ประกอบ มีการกำหนดค่าผ่านอ็อบเจกต์ที่ซ้อนกัน ซึ่งเป็นอ็อบเจกต์ที่ปรากฏอยู่ในอ็อบเจกต์อื่นๆ ตัวอย่างเช่น ข้อความสำหรับปุ่มหน้าถัดไปจะปรากฏขึ้นภายในองค์ประกอบproductSet ของอ็อบเจกต์text:
options: {
productSet: {
text: {
nextPageButton: 'Continue'
}
}
}