การแสดงผล AJAX ของรถเข็นหลังจากการร้องขอรถเข็นแบบกำหนดเอง

Question

ฉันกำลังสร้างแอป Shopify ซึ่งนำเสนอผลิตภัณฑ์หรือบริการเพิ่มเติมที่เกี่ยวข้องกับผลิตภัณฑ์ที่ระบุบางส่วน ในบางกรณีฉันต้องเพิ่มสินค้าลงในรถเข็นจากหน้ารถเข็น

ฉันพบว่าคำถามนี้มีประโยชน์มากในการดำเนินการเปลี่ยนแปลงรถเข็น ปัญหาคือขณะนี้ฉันถูกบังคับให้โหลดหน้านี้ซ้ำเพื่อแสดงผลรถเข็นอีกครั้งพร้อมกับผลิตภัณฑ์ใหม่ ฉันไม่สามารถสร้างรถเข็นขึ้นมาใหม่เพื่อรวมสินค้าใหม่ได้

ดังนั้นมีวิธีเรียก "การแสดงผล AJAX" ของรถเข็นและหลีกเลี่ยงการโหลดซ้ำทั้งหน้าหรือไม่

Answer 1

คุณสามารถบรรลุเป้าหมายนี้ได้หลายวิธีขึ้นอยู่กับเป้าหมายสุดท้ายของคุณ จากคำอธิบายของคุณฉันเข้าใจว่าคุณแค่ต้องการให้สคริปต์ของคุณทำงานบนหน้ารถเข็น อย่างไรก็ตามโปรดทราบว่าผู้ใช้สามารถไปที่หน้าชำระเงินได้โดยไม่ต้องไปที่หน้ารถเข็น ดังนั้นให้ครอบคลุมทุกกรณีการใช้งานของคุณ

สิ่งนี้จะง่ายกว่ามากถ้าคุณต้องทำในธีมไม่ใช่ในแอพ เนื่องจากแอปของคุณไม่มีความคิดใด ๆ เกี่ยวกับการมาร์กอัปของหน้ารถเข็นจึงไม่ใช่เรื่องง่ายที่จะต่อท้ายแถวผลิตภัณฑ์ใหม่เข้ากับตารางที่มีอยู่ วิธีแก้ปัญหาในการเพิ่มผลิตภัณฑ์ใหม่ให้เรียกหน้ารถเข็นผ่าน Ajax แยกวิเคราะห์ HTML ที่ส่งคืนและแทนที่แบบฟอร์มรถเข็น ดังนั้นหลังจากเพิ่มผลิตภัณฑ์ใหม่เพียงแค่เรียกรหัสด้านล่างเพื่อแสดงแบบฟอร์มผลิตภัณฑ์ในหน้ารถเข็น

function RerenderCart() {
  $.get("/cart", function (data) { const parser = new DOMParser(); const doc = parser.parseFromString(data, "text/html"); const formSelector = doc.querySelector("form[action='/cart']"); $("form[action='/cart']").replaceWith(formSelector);
  });
}

เพิ่มการตรวจสอบหน้ารถเข็นและหากพบแบบฟอร์มใน HTML ที่ส่งคืน

รหัสนี้ใช้ได้ดีกับธีม Debut Shopify เพียงทดสอบอย่างละเอียดในทุกกรณีการใช้งานของคุณ

DOMParser