ฟังปริมาณการอัปเดตรถเข็นของ shopify
ฉันกำลังเขียนแอป Shopify และต้องการฟังกิจกรรมการอัปเดตรถเข็นของ Shopify ฉันรู้ว่าเมื่อผู้ใช้คลิกที่ลบหรือเพิ่มปริมาณสินค้า Shopify ส่งคำขอ POST ไปยังแบ็กเอนด์เพื่ออัปเดตการ์ด แอพของฉันคำนวณมูลค่าการจัดส่งตามปริมาณสินค้าในตะกร้าของ shopify ฉันเพิ่มสคริปต์แอพของฉันไปยัง shopify ผ่าน script-tag
ฉันพยายามฟังปริมาณการป้อนข้อมูล แต่เหตุการณ์นี้เกิดขึ้นเพียงครั้งเดียว ฉันคิดว่า Shopify อัปเดต DOM อินพุตทุกครั้งหลังจากอัปเดตรถเข็นดังนั้นจึงอาจลบผู้ฟังของฉัน
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
ฉันจะฟังเหตุการณ์อัปเดตรถเข็นได้อย่างไร? ดูเหมือนจะเป็นคำถามง่ายๆ แต่ฉันไม่พบคำตอบเกี่ยวกับ Shopify เลยจริงๆ!
คำตอบ
ดังนั้นจึงมี 2 วิธีที่รถเข็น Shopify อาจได้รับการอัปเดต ไม่ว่าจะผ่านการส่งแบบฟอร์มหรือใช้ Ajax API สมมติว่าคุณได้แก้ไขกรณีการส่งแบบฟอร์มแล้วโดยเรียกใช้ฟังก์ชันคำนวณการจัดส่งในการโหลดหน้า สำหรับการอัปเดตรถเข็นของ Ajax จะไม่มีเหตุการณ์มาตรฐาน บางธีมอาจเริ่มเหตุการณ์ในการอัปเดตรถเข็น แต่ในกรณีของแอปทั่วไปจะไม่สามารถพึ่งพาได้เนื่องจากไม่มีพฤติกรรมมาตรฐานที่กำหนดไว้
ดังนั้นสิ่งที่คุณทำได้คือฟังการโทร AJAX และเรียกใช้ฟังก์ชันของคุณหากตรงกับเงื่อนไขของคุณ Shopify Docs for Ajax APIแสดงรายการคำขอ POST 4 ประเภทที่อาจอัปเดตรถเข็น ดังนั้นโดยการแพตช์ฟังก์ชันเปิดของXMLHttpRequestเราจึงเพิ่มตัวฟังเหตุการณ์สำหรับโหลดที่เริ่มทำงานเมื่อคำขอเสร็จสมบูรณ์ ในการเรียกกลับเหตุการณ์เราตรวจสอบว่า URL นั้นเป็น URL ที่ใช้สำหรับการอัปเดตรถเข็นหรือไม่จากนั้นเรียกใช้ฟังก์ชันการจัดส่งที่อัปเดต
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
"/cart/change.js",
"/cart/clear.js",
].includes(this._url)
) {
calculateShipping(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function calculateShipping(cartJson) {
console.log("calculate new shipping");
console.log(JSON.parse(cartJson));
}
แนวคิดที่ได้รับคำตอบจาก Nicolas
ไม่ได้ใช้ ajaxCompleteเนื่องจากฟังเฉพาะคำขอที่สร้างโดยใช้ jQuery
การตอบกลับไปยังฟังก์ชันการจัดส่งของคุณจะช่วยประหยัดการเรียก Get Cart Ajax เพิ่มเติม
อัปเดต
หากรหัสด้านบนใช้ไม่ได้สำหรับคุณหรือไม่รับสายทั้งหมดโปรดดูคำตอบอื่นของฉันที่รับฟังการเรียก Fetch API ทั้งหมดหากมีการใช้เพื่ออัปเดตรถเข็น
เพื่ออัปเดตฟิลด์ปริมาณสินค้าในรถเข็นในธีมที่แบ่งส่วน
ขั้นตอนที่ 1: คุณเข้าถึง Shopify admin คลิกร้านค้าออนไลน์และไปที่ธีม
ขั้นตอนที่ 2: ค้นหาธีมที่คุณต้องการแก้ไขจากนั้นกด Actions จากนั้นแก้ไขโค้ด
ขั้นตอนที่ 3: ดูที่ส่วนคุณคลิกที่ cart-template.liquid ในกรณีที่คุณไม่ได้ใช้ธีมที่ไม่มีที่อยู่คุณสามารถเข้าถึงไดเร็กทอรี Template และคลิก cart.liquid
ขั้นตอนที่ 4: ค้นหาวลีที่เขียนว่า update [item.id] ในแท็กอินพุต
ขั้นตอนที่ 5: เปลี่ยนชื่อเป็นค่าของ name =“ updates []”
ขั้นตอนที่ 6: ย้ำขั้นตอนข้างต้นเหล่านี้ทุกครั้งที่คุณเห็นค่าชื่อของการอัปเดต [] ในแท็กอินพุต
ขั้นตอนที่ 7: คลิกบันทึกและคุณอัปเดตฟิลด์ปริมาณสินค้าสำเร็จ ..