การเชื่อมต่อ Wix#

เชื่อมต่อ Room Visualizer กับ Wix Stores ผ่าน Wix ส่วนขยาย surface ที่ตรงกับประเภทเว็บไซต์ของคุณ Wix Editor และ Wix Studio ต้องใช้วิธีการที่แตกต่างกัน

สถานะการตรวจสอบ: ตรวจสอบเอกสาร Wix ส่วนขยาย เมื่อ 7 กันยายน 2569 ไม่มี Wix เว็บไซต์หรือข้อมูลรับรองแอปของลูกค้าให้ใช้งาน ดังนั้นจึงไม่ได้รับการรับรองแบบ ตั้งแต่ต้นจนจบ SDK ต้องใช้ DOM ของ หน้าร้านออนไลน์ ร่วมกับคอนเทนเนอร์; HTML ไอเฟรม ไม่สามารถทดแทนได้

ก่อนโหลด SDK: เปิด แดชบอร์ด → การตั้งค่า, เพิ่มต้นทางของหน้างานออนไลน์ของคุณไปยัง Allowed Origins (CORS) และคลิก บันทึก รวมชื่อโฮสต์ที่เผยแพร่และต้นทางใดๆ สำหรับพรีวิวหรือสเตจจิ้งที่คุณใช้; แยกต้นทางหลายรายการด้วยเครื่องหมายจุลภาค ดู ขั้นตอนการตั้งค่า

เลือกเส้นทาง Wix ที่ถูกต้อง#

Wix ระบุว่าสคริปต์ฝังตัวของ Stores ไม่พร้อมใช้งานใน Wix Studio และแนะนำให้ใช้ส่วนขยายปลั๊กอินไซต์ ห้ามติดตั้งวิธีฝังสคริปต์สำหรับ Editor แล้วอ้างว่ารองรับ Studio ด้วย

ข้อกำหนดเบื้องต้น#

เตรียม Wix เว็บไซต์ทดสอบพร้อม Wix Stores, สิทธิ์ในการเผยแพร่ custom code หรือ แอป ส่วนขยาย, ideal.house Shop ID และ Publishable Key, และ SKU ทดสอบที่นำเข้ามาแล้ว ตัดสินใจว่า Wix variant ที่เลือกมี SKU ของตัวเองหรือไม่ เก็บข้อมูลลับของแอปและ API keys ของ ระบบหลังบ้าน ไว้ภายนอกหน้าเบราว์เซอร์

มาร์กอัพ SDK ขั้นต่ำ#

ที่ Wix อนุญาตให้โค้ดของคุณทำงานในเอกสารของหน้างานออนไลน์ มาร์กอัพ ideal.house ที่รองรับคือ:

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Product Code ต้องตรงกับ ideal.house sku ที่นำเข้าอย่างแม่นยำ

Wix Editor: ติดตั้งสำหรับไซต์เดียว#

ในแดชบอร์ด Wix ให้เพิ่มแท็ก SDK ผ่าน การตั้งค่า → โค้ดที่กำหนดเอง วางไว้ในเนื้อหาหรือท้ายเนื้อหา และเลือกหน้าสินค้าที่ต้องการ เผยแพร่เว็บไซต์ การดูตัวอย่างอย่างเดียวไม่เพียงพอสำหรับการตรวจสอบการใช้งานจริง

จากนั้นเพิ่มองค์ประกอบที่กำหนดเองในหน้าสินค้าหรือจุดขยาย Wix Stores ที่สร้างคอนเทนเนอร์ในเอกสารระดับบนสุดเดียวกัน หลีกเลี่ยงการใช้ส่วนฝัง HTML ของ Wix สำหรับปุ่ม เพราะทำงานภายในไอเฟรม สคริปต์ในเอกสารแม่จึงค้นหาคอนเทนเนอร์ไม่ได้ และสคริปต์ในไอเฟรมก็ควบคุมหน้าสินค้าไม่ได้

องค์ประกอบที่วางได้ควรเปิดเผยการดำเนินการหนึ่งรายการในโค้ดของคุณ:

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

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

แอป Wix: Embedded Script สำหรับ Wix Editor Stores#

Wix Stores ให้ details-placeholder และ bottom-placeholder locations สำหรับ Embedded Script ส่วนขยาย เพิ่ม host ไปยังหนึ่งใน placeholders เหล่านั้น; ห้ามแทนที่เนื้อหาของมันเพราะแอปอื่นสามารถแชร์ได้ กำหนดค่า SDK script เป็น embedded fragment แยกส่วนหรือสร้างแบบ programmatic ด้วย src, data-shop-id, และ data-publishable-key attributes ที่ถูกต้อง

Wix Site API ที่มีให้สำหรับสคริปต์ฝังตัวซึ่งสร้างผ่าน CLI สามารถอ่านบริบทของหน้าร้านได้ ระบุ SKU ของตัวเลือกสินค้าปัจจุบันผ่าน Stores API ที่ Wix รองรับ แล้วเรียกฟังก์ชันเชื่อมต่อ setIdealhouseSku() ของคุณ ปล่อยตัวแทนตำแหน่งว่างไว้จนกว่าจะทราบ SKU ที่ครบถ้วน

Wix Studio: ปลั๊กอินไซต์#

สร้างปลั๊กอิน Wix Stores โดยกำหนดเป้าหมายไปที่สล็อตหน้าสินค้าที่มีเอกสารรองรับ แสดงคอนเทนเนอร์จาก UI ของปลั๊กอิน และโหลด SDK ในเอกสารไซต์ที่ Wix สร้างขึ้น ปลั๊กอินต้องส่ง SKU ของตัวแปรสินค้าปัจจุบันที่แก้ไขแล้วไปยังคอนเทนเนอร์ DOM ชื่อสล็อตและ API ของคอมโพเนนต์ใน Wix Studio อาจมีการเปลี่ยนแปลง; เลือกชื่อเหล่านั้นจากเอกสารอ้างอิง CLI/API ปัจจุบันเมื่อสร้างส่วนขยาย แทนที่จะคัดลอกชื่อจากคู่มือนี้

ห้ามใช้ plugin slot ที่แสดง control ภายใน isolated ไอเฟรม: SDK และ viewer ของมันไม่ได้รับการรับรองสำหรับขอบเขตนั้น เลือก Wix ส่วนขยาย point ที่วางคอนเทนเนอร์ใน หน้าร้านออนไลน์ document หรือใช้ headless หน้าร้านออนไลน์ ที่คุณควบคุม document ได้

การแมปสินค้าและการนำทาง#

แมป Wix product หรือ variant sku ไปยัง ideal.house sku ห้าม fallback ไปยัง Wix product ID โดยเงียบๆ เพราะ ID ที่สร้างจะไม่ตรงกับ แค็ตตาล็อก SKU เว้นแต่คุณจะนำเข้าโดยเจตนา

หน้าสินค้า Wix สามารถแทนที่เนื้อหาได้ระหว่าง option selection หรือ client navigation ในทุก product/choice ฟังก์ชันเรียกกลับ ที่ระบุในเอกสาร:

1. ล้างคอนเทนเนอร์ที่เรนเดอร์ไว้ก่อนหน้า;
2. แก้ไข variant ที่เลือกให้สมบูรณ์;
3. แทรกคอนเทนเนอร์ใหม่พร้อม SKU ของมัน;
4. ปล่อยโฮสต์ว่างไว้เมื่อไม่มี SKU ที่สมบูรณ์หรือสามารถแสดงภาพได้

สำหรับ galleries และ repeaters แต่ละรายการต้องการ SKU ระดับรายการของตัวเอง สินค้าแบบ มุมมองด่วน และ modal ต้องการ lifecycle bridge เดียวกันที่ modal slot

นำเข้าสินค้า#

Wix Stores ไม่ซิงค์กับ ideal.house อัตโนมัติ ส่งออกฟิลด์สินค้าและตัวแปรของ Wix, ตั้งค่า Wix SKU ที่ต้องการแต่ละตัวเป็น sku และใช้ การอัปโหลดสินค้า ดู นำเข้าสินค้า, สถานะงาน, ดูรายการสินค้า, อัปเดตสินค้า, ลบสินค้า และ ข้อผิดพลาดและการลองใหม่

การซิงค์ Wix-to-ideal.house แบบอัตโนมัติ, แอป installation flow, หรือ Wix webhook processor เป็นงานที่ลูกค้าเป็นเจ้าของ; คู่มือนี้ไม่ได้สัญญาว่าจะมี

ตรวจสอบก่อนเผยแพร่#

1. ทดสอบไซต์ที่เผยแพร่แล้วในหน้าต่างเบราว์เซอร์แบบส่วนตัวบนเดสก์ท็อปและมือถือ
2. ยืนยันว่า SDK โหลดเพียงครั้งเดียวในเอกสารเดียวกับคอนเทนเนอร์
3. เปรียบเทียบ Product Code ของ DOM กับ SKU ที่นำเข้าอย่างแม่นยำ
4. เปลี่ยนตัวเลือกทั้งหมดจนกว่าจะเลือกตัวแปรสุดท้าย; ยืนยันว่าคอนเทนเนอร์เก่าถูกลบและคอนเทนเนอร์ใหม่ปรากฏขึ้น
5. ทดสอบการนำทางฝั่งไคลเอนต์ของ Wix, หน้าแกลเลอรี/รีพีตเตอร์สินค้า, การดูอย่างรวดเร็ว, การย้อนกลับ/ไปข้างหน้าของเบราว์เซอร์, การตั้งค่าการยินยอม, และโหมดสมาชิก/ผู้ใช้ที่ไม่ได้เข้าสู่ระบบ
6. ยืนยันว่า SKU ที่ไม่รู้จักหรือว่างเปล่าไม่ทิ้ง visualizer control ที่เสียหายไว้
7. สำหรับแอป ให้ทดสอบการติดตั้ง การเปิดใช้งาน การปิดใช้งาน และการถอนการติดตั้งบนไซต์ทดสอบ Wix Editor และ Studio แยกกันตามขอบเขตที่รองรับ

ลบการเชื่อมต่อ#

ลบหรือปิดรายการโค้ดที่กำหนดเองของ Wix และลบองค์ประกอบในหน้าสินค้า สำหรับแอป ให้ลบส่วนขยายสคริปต์ฝังตัวหรือปลั๊กอินไซต์ แล้วถอนการติดตั้งจากไซต์ทดสอบ เผยแพร่และยืนยันว่าคำขอสคริปต์และโหนด data-idealhouse-* ทั้งหมดหายไป

แหล่งอ้างอิงแพลตฟอร์มอย่างเป็นทางการ#

• Wix: ปรับแต่ง Wix Stores โดยใช้ Embedded Scripts
• Wix: เกี่ยวกับ Embedded Scripts
• Wix: เกี่ยวกับ Site ส่วนขยาย
• Wix: องค์ประกอบแบบกำหนดเอง