การบูรณาการ Webflow#

ใช้โค้ดที่กำหนดเองและฟิลด์ CMS/Ecommerce ของ Webflow เพื่อแสดงปุ่ม Room Visualizer ที่มี Product Code ตรงกับแคตตาล็อก ideal.house

สถานะการตรวจสอบ: ตรวจสอบเอกสารศูนย์ช่วยเหลือ Webflow เมื่อ 7 กันยายน 2569 ไม่มีเว็บไซต์ Webflow ของลูกค้าให้ใช้งาน โค้ดที่กำหนดเองทำงานหลังการดูตัวอย่าง/เผยแพร่ และ Webflow ไม่เรียกใช้โค้ดฝั่งเซิร์ฟเวอร์ในส่วนฝังโค้ด ดังนั้นให้ทดสอบบนโดเมนสภาพแวดล้อมทดสอบที่เผยแพร่แล้ว

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

ข้อกำหนดเบื้องต้นและข้อจำกัด#

คุณต้องมีสิทธิ์ใช้โค้ดที่กำหนดเองหรือส่วนฝังโค้ด โดเมนสำหรับทดสอบ Shop ID, Publishable Key และ SKU หนึ่งรายการที่นำเข้าแคตตาล็อกแล้ว การฝัง JavaScript ต้องเป็นไปตามข้อกำหนดของแผนบริการ Webflow เบราว์เซอร์อาจมี Publishable Key ได้ แต่ห้ามมี Client Secret หรือคีย์ AI API

SDK ไม่อ่านข้อมูล Webflow Ecommerce โดยอัตโนมัติ เทมเพลตของคุณต้องเปิดเผย SKU หรือโค้ดเชื่อมต่อที่ลูกค้าพัฒนาต้องดึงค่านั้นจากฟิลด์ CMS ที่เชื่อถือได้

สัญญา 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>

data-product-code ต้องเท่ากับ sku ของ ideal.house ที่นำเข้าอย่างแม่นยำ

ติดตั้งตัวโหลด#

เปิด การตั้งค่าไซต์ → โค้ดที่กำหนดเอง และเพิ่มแท็กสคริปต์ SDK ในส่วนท้าย/ส่วนท้ายของเนื้อหา แทนที่ค่าตัวอย่าง บันทึก และเผยแพร่ ติดตั้งเพียงครั้งเดียวในระดับไซต์ ห้ามเพิ่มซ้ำในทุกรายการ CMS

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

เพิ่มปุ่มระดับรายการ#

สร้างฟิลด์ข้อความธรรมดาใน CMS โดยตั้งชื่อ เช่น Idealhouse SKU แล้วใส่ค่าเดียวกับที่นำเข้าเป็น sku ใน ideal.house ในเทมเพลตสินค้าหรือคอลเลกชัน CMS ให้เพิ่มส่วนฝังโค้ดในตำแหน่งที่ต้องการวางปุ่ม:

html

<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

ใช้ตัวควบคุม เพิ่มฟิลด์ ของ Webflow ในตัวแก้ไขส่วนฝังโค้ดเพื่อแทรกค่าของรายการปัจจุบัน คำแนะนำในวงเล็บด้านบนไม่ใช่มาร์กอัปที่คัดลอกไปใช้งานจริงได้โดยตรง หลังเผยแพร่ ให้ตรวจสอบ DOM และยืนยันว่าค่านั้นกลายเป็นสตริงปกติ เช่น:

html

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

สำหรับหน้าคงที่ ให้วางค่า SKU จริง ห้ามใช้ชื่อย่อในเส้นทางของหน้าหรือ ID รายการ Webflow เว้นแต่ค่านั้นจะตรงกับ SKU ที่นำเข้า ideal.house ทุกประการ

ตัวแปรสินค้าและการเรนเดอร์ไดนามิก#

การผูกข้อมูลมาตรฐานในเครื่องมือออกแบบของ Webflow อาจไม่เปิดเผย SKU ของตัวเลือกสินค้าที่เลือกครบแล้วให้โค้ดที่กำหนดเองในทุกแบบหน้าร้าน Ecommerce หากแต่ละตัวเลือกที่แสดงต้องใช้ทรัพยากร ideal.house ต่างกัน ให้สร้างโค้ดเชื่อมต่อที่ลูกค้าพัฒนาเพื่อรับตัวเลือกสินค้าที่เลือกจากการเชื่อมต่อ Webflow ที่รองรับหรือชั้นข้อมูลของคุณเอง แล้วแทนที่คอนเทนเนอร์:

function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

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

อินเทอร์แอคชันของ Webflow, ตัวกรอง CMS, การแบ่งหน้าจากบุคคลที่สาม, และการเปลี่ยนผ่านแบบ SPA อาจเพิ่มหรือแทนที่รายการ Collection รวม Embed ไว้ในเทมเพลตของรายการแต่ละรายการ หรือเรียกใช้ bridge หลังจาก ฟังก์ชันเรียกกลับ การเรนเดอร์ที่มีเอกสารรองรับของเครื่องมือ สร้างคอนเทนเนอร์ใหม่เสมอ แทนที่จะโคลน markup ที่ SDK ประมวลผลแล้ว

นำเข้าข้อมูลแคตตาล็อก#

ส่งออกฟิลด์สินค้า/CMS ของ Webflow และจับคู่ Idealhouse SKU กับ sku อัปโหลดผ่าน การอัปโหลดสินค้า แล้วทำตาม นำเข้าสินค้า, สถานะงาน, ดูรายการสินค้า, อัปเดตสินค้า, ลบสินค้า และ ข้อผิดพลาดและการลองใหม่

ไม่มีการซิงค์ Webflow อัตโนมัติโดย SDK ฝั่งเบราว์เซอร์ การส่งออก API ของ CMS, webhook หรือระบบอัตโนมัติ เป็นความรับผิดชอบของลูกค้า

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

เผยแพร่ไปยัง สภาพแวดล้อมทดสอบก่อนเผยแพร่ และทดสอบรายการที่จับคู่แล้ว, ฟิลด์ที่ขาดหาย, SKU ที่ไม่รู้จัก, รายการ Collection, เทมเพลตสินค้า, ตัวกรอง/การแบ่งหน้า, โมดัล, จุดตัดมือถือ, ตัวควบคุมการยินยอม, และการย้อนกลับ/ไปข้างหน้าของเบราว์เซอร์ ตรวจสอบว่า SDK โหลดเพียงครั้งเดียว, โค้ดที่เรนเดอร์แต่ละตัวตรงกับรายการปัจจุบัน, และไม่มีข้อมูลรับรองเซิร์ฟเวอร์ปรากฏใน HTML

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

การบูรณาการ Webflow#

ข้อกำหนดเบื้องต้นและข้อจำกัด#

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

ติดตั้งตัวโหลด#

เพิ่มปุ่มระดับรายการ#

ตัวแปรสินค้าและการเรนเดอร์ไดนามิก#

นำเข้าข้อมูลแคตตาล็อก#

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

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