หน้าไดนามิกและการเปลี่ยนตัวแปรสินค้า#

SDK สังเกตเป้าหมายที่แทรกหลังจากโหลดหน้าแล้ว หน้าร้านออนไลน์ของคุณยังคงเป็นเจ้าของสินค้าที่เลือกและต้องรักษาทรี่บิวต์เป้าหมายให้ซิงค์กับการเลือกนั้น

โหลดครั้งเดียว อัปเดตเป้าหมาย#

เก็บตัวโหลด SDK ไว้หนึ่งตัวในระดับแอปพลิเคชันหรือธีม ห้ามเพิ่มสคริปต์ใหม่ทุกครั้งที่เปลี่ยนเส้นทาง เรนเดอร์เป้าหมายที่สินค้าปัจจุบันปรากฏ และอัปเดตเมื่อการดูแบบด่วน ตัวเลือกตัวแปรสินค้า หรือเส้นทางฝั่งไคลเอนต์เปลี่ยนสินค้า

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

รีเซ็ตปุ่มที่เขียนไว้เอง#

ส่วนต่อไปนี้ปฏิบัติตามสัญญาของหน้าร้านแบบกำหนดเองที่มีอยู่ เรียกใช้จากตัวจัดการการเลือกของคุณเอง หลังจากทราบรหัสสินค้าที่เลือกแล้ว

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

เชื่อมต่อวงจรชีวิตแพลตฟอร์มจริง#

ไม่มีเหตุการณ์เปลี่ยน variant มาตรฐานสำหรับ e-commerce Shopify guide กำหนดเหตุการณ์สำหรับธีมของคุณในการ ส่งเหตุการณ์ การเพิ่ม ตัวรับฟังเหตุการณ์ เพียงอย่างเดียวไม่ทำให้ธีมเชื่อมต่อสมบูรณ์ ให้ใช้ ฟังก์ชันเรียกกลับ ที่เอกสารระบุไว้สำหรับธีมหรือแอปพลิเคชันจริงของคุณ

สำหรับ React / Next.js และ Vue / Nuxt ให้ทำตามคำแนะนำวงจรชีวิตฝั่งไคลเอนต์และการทำความสะอาดของคู่มือเฟรมเวิร์ก

ตรวจสอบการเลือกที่ล้าสมัย#

สลับระหว่างสินค้าที่มีสิทธิ์ สินค้าที่มีสิทธิ์อีกตัว และสินค้าที่ไม่มีแมป Viewer ต้องไม่เปิดสินค้าก่อนหน้าอีกครั้งหลังจากการเลือกเปลี่ยน ทำซ้ำกับการดูแบบด่วนและการนำทางย้อนกลับของเบราว์เซอร์