ฟังปริมาณการอัปเดตรถเข็นของ shopify

Aug 17 2020

ฉันกำลังเขียนแอป Shopify และต้องการฟังกิจกรรมการอัปเดตรถเข็นของ Shopify ฉันรู้ว่าเมื่อผู้ใช้คลิกที่ลบหรือเพิ่มปริมาณสินค้า Shopify ส่งคำขอ POST ไปยังแบ็กเอนด์เพื่ออัปเดตการ์ด แอพของฉันคำนวณมูลค่าการจัดส่งตามปริมาณสินค้าในตะกร้าของ shopify ฉันเพิ่มสคริปต์แอพของฉันไปยัง shopify ผ่าน script-tag

ฉันพยายามฟังปริมาณการป้อนข้อมูล แต่เหตุการณ์นี้เกิดขึ้นเพียงครั้งเดียว ฉันคิดว่า Shopify อัปเดต DOM อินพุตทุกครั้งหลังจากอัปเดตรถเข็นดังนั้นจึงอาจลบผู้ฟังของฉัน

 $('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});

ฉันจะฟังเหตุการณ์อัปเดตรถเข็นได้อย่างไร? ดูเหมือนจะเป็นคำถามง่ายๆ แต่ฉันไม่พบคำตอบเกี่ยวกับ Shopify เลยจริงๆ!

คำตอบ

6 BilalAkbar Aug 20 2020 at 13:00

ดังนั้นจึงมี 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 ทั้งหมดหากมีการใช้เพื่ออัปเดตรถเข็น

ฟังการเปลี่ยนแปลงรถเข็นโดยใช้ Fetch API

Yashchitroda Aug 20 2020 at 13:03

เพื่ออัปเดตฟิลด์ปริมาณสินค้าในรถเข็นในธีมที่แบ่งส่วน

ขั้นตอนที่ 1: คุณเข้าถึง Shopify admin คลิกร้านค้าออนไลน์และไปที่ธีม

ขั้นตอนที่ 2: ค้นหาธีมที่คุณต้องการแก้ไขจากนั้นกด Actions จากนั้นแก้ไขโค้ด

ขั้นตอนที่ 3: ดูที่ส่วนคุณคลิกที่ cart-template.liquid ในกรณีที่คุณไม่ได้ใช้ธีมที่ไม่มีที่อยู่คุณสามารถเข้าถึงไดเร็กทอรี Template และคลิก cart.liquid

ขั้นตอนที่ 4: ค้นหาวลีที่เขียนว่า update [item.id] ในแท็กอินพุต

ขั้นตอนที่ 5: เปลี่ยนชื่อเป็นค่าของ name =“ updates []”

ขั้นตอนที่ 6: ย้ำขั้นตอนข้างต้นเหล่านี้ทุกครั้งที่คุณเห็นค่าชื่อของการอัปเดต [] ในแท็กอินพุต

ขั้นตอนที่ 7: คลิกบันทึกและคุณอัปเดตฟิลด์ปริมาณสินค้าสำเร็จ ..