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

ใช้แอปหน้าร้านแบบกำหนดเองของ Ecwid และวงจรชีวิต หน้าร้านออนไลน์ JS API ที่ระบุไว้ในเอกสารเพื่อเพิ่มการควบคุม Room Visualizer ไปยังหน้าสินค้าของ Ecwid

สถานะการตรวจสอบ: เอกสาร Ecwid หน้าร้านออนไลน์ JS API ได้รับการตรวจสอบเมื่อ 7 กันยายน 2569 ไม่สามารถเข้าถึงแอป Ecwid หรือร้านค้าทดสอบของพ่อค้าได้ ต้องยืนยันฟิลด์ข้อมูลหน้าเพจที่แน่นอนกับเอกสารอ้างอิง OnPageLoaded ปัจจุบันก่อนการนำไปใช้งาน

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

ข้อกำหนดเบื้องต้นและเส้นทางที่รองรับ#

Ecwid ต้องการแอปแบบกำหนดเองพร้อมไฟล์ JavaScript ที่โฮสต์เองสำหรับการปรับแต่งหน้างานออนไลน์อย่างยั่งยืน เตรียมร้านค้า/แอปพัฒนา Ecwid, ไฟล์อะแดปเตอร์ที่โฮสต์ผ่าน HTTPS, Shop ID, Publishable Key, และ SKU สินค้า/ตัวแปรที่นำเข้าแล้ว

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

สัญญา SDK ขั้นต่ำ#

html

<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>

ใช้ Ecwid SKU ที่คุณนำเข้าเป็น ideal.house sku อย่างถูกต้อง

เริ่มต้นใช้งานแอปหน้างานออนไลน์ Ecwid ของคุณ#

ทำตามขั้นตอนเริ่มต้นอย่างรวดเร็วสำหรับหน้าร้านแบบกำหนดเองของ Ecwid เพื่อลงทะเบียนไฟล์ที่โฮสต์เอง เริ่มด้วย ฟังก์ชันเรียกกลับ ที่พร้อมใช้งาน API ตามที่ระบุไว้ในเอกสาร จากนั้นโหลด ideal.house SDK เพียงครั้งเดียว:

Ecwid.OnAPILoaded.add(function () {
  if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;

  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
});

สำหรับแอปหลายร้านค้า ให้รับค่าสาธารณะสองค่าของ ideal.house จากการจัดค่าสาธารณะที่ปลอดภัยของแอปของคุณ ห้ามใส่ความลับแอป Ecwid, โทเคนการเข้าถึง หรือ ideal.house Client Secret ลงในไฟล์นี้

เรนเดอร์บนหน้าสินค้า#

Ecwid ระบุ Ecwid.OnPageLoaded.add() และป้อนข้อมูลหน้าเพจไปยัง ฟังก์ชันเรียกกลับ ของมัน ใช้เอกสารอ้างอิง API ปัจจุบันเพื่อยืนยันประเภทและตัวระบุของหน้าสินค้า ดึงหรืออ่านข้อมูลสินค้าผ่านอินเทอร์เฟซไคลเอนต์ที่ Ecwid รองรับ จากนั้นส่ง SKU ที่แก้ไขแล้วไปยัง:

function mountIdealhouse(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;

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

แทรก host ไปยังตำแหน่งรายละเอียดสินค้าที่เสถียรหลังจาก Ecwid เสร็จสิ้นการเรนเดอร์หน้าเพจ ลบโฮสต์ก่อนหน้าเมื่อประเภทหน้าเปลี่ยน เซเลกเตอร์ DOM และการค้นหาจากข้อมูลหน้าเพจไปสินค้าเป็นโค้ดอะแดปเตอร์ของลูกค้าเนื่องจากเลย์เอาต์หน้างานออนไลน์และเวอร์ชันข้อมูลของ Ecwid สามารถเปลี่ยนได้

ตัวเลือกและการนำทาง#

เมื่อผู้ซื้อเลือกตัวเลือกสินค้า ให้รอจนกว่า Ecwid จะแก้ไขตัวแปรสินค้าที่สามารถซื้อได้และ SKU ของมัน เรียก mountIdealhouse() ด้วย SKU นั้น หรือล้างโฮสต์หากการเลือกไม่สมบูรณ์ อย่าเชื่อมต่อป้ายชื่อตัวเลือกเพื่อสร้างรหัสขึ้นเอง

Ecwid เป็นหน้าร้านแบบหน้าเดียว ใช้วงจรชีวิตหน้าเพจที่ระบุไว้ในเอกสาร (callback OnPageLoaded/สลับหน้า) แทนที่จะรับฟังเฉพาะ DOMContentLoaded ของเบราว์เซอร์ การนำทางหมวดหมู่/การค้นหา การย้อนกลับ/ไปข้างหน้าของเบราว์เซอร์ วิดเจ็ตที่ฝัง และป๊อปอัปสินค้าต้องลบโฮสต์สินค้าที่ล้าสมัยและติดตั้งคอนเทนเนอร์ใหม่หลังการเรนเดอร์

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

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

การส่งออก Ecwid REST API, เว็บฮุค, การติดตั้ง OAuth หรือซิงค์ซ้ำใดๆ เป็นความรับผิดชอบของลูกค้าและต้องดำเนินการบนเซิร์ฟเวอร์ด้วยการอนุญาต Ecwid ที่เหมาะสม

ตรวจสอบและลบออก#

ทดสอบการติดตั้งแอป, การเริ่มต้น API, การเปลี่ยนผ่านสินค้า/หมวดหมู่/การค้นหา, ตัวแปรทุกตัว, SKU ที่ขาดหายและที่ไม่รู้จัก, ย้อนกลับ/ไปข้างหน้าของเบราว์เซอร์, วิดเจ็ต Ecwid ที่ฝังบนเว็บไซต์อื่น, เลย์เอาต์มือถือ, การยินยอม และลูกค้าที่เข้าสู่ระบบ/ออกจากระบบ ยืนยันคำขอ SDK หนึ่งครั้งในเอกสารที่ประกอบด้วยโฮสต์และความเท่ากันของ SKU อย่างถูกต้อง

เพื่อกำหนดการลบ ให้แยกไฟล์ JavaScript ที่โฮสต์เองออกจากแอปแบบกำหนดเองหรือถอนการติดตั้งแอป ลบโฮสต์/ตัวรับฟังที่แทรก และตรวจสอบว่า SDK URL และโหนด data-idealhouse-* ทั้งหมดหายไปหลังจากนำทางหน้างานออนไลน์และรีเฟรชแบบแข็ง