การเชื่อมต่อสำหรับผู้พัฒนาหน้างานออนไลน์แบบกำหนดเอง#

โหลด ideal.house SDK และแมปค่า productCode ของหน้างานออนไลน์ไปยังแคตตาล็อก

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

1. โหลด SDK#

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

2. เลือกสัญญาปุ่มหนึ่งแบบ#

ตัวเลือก A: ปุ่มที่สร้างโดย SDK#

เรนเดอร์คอนเทนเนอร์เป้าหมาย หลังจากตรวจสอบสินค้าแล้ว SDK จะสร้างปุ่มลูกของมัน

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

ตัวเลือก B: ปุ่มที่เขียนขึ้นเอง#

เรนเดอร์และจัดสไตล์ปุ่มด้วยตัวคุณเอง SDK จะรักษา DOM และผูกความเหมาะสมรวมถึงพฤติกรรมคลิก

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. รักษา productCode ให้เหมือนเดิมกับแคตตาล็อก#

<PRODUCT_CODE>

• productCode ของแคตตาล็อกและ data-product-code ของหน้างานออนไลน์ต้องเหมือนกัน รวมถึงตัวพิมพ์ใหญ่/เล็ก
• อย่าสร้าง productCode ใหม่จากชื่อที่เปลี่ยนแปลงได้ในแต่ละครั้งเรนเดอร์; อัปเดตแคตตาล็อกและหน้างานออนไลน์พร้อมกันเมื่อจำเป็นต้องเปลี่ยน

4. จัดการหน้าไดนามิกและสินค้าที่เลือก#

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

อัปเดตปุ่มที่เขียนขึ้นเองหลังการเปลี่ยนการเลือก#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.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
}

5. ตรวจสอบการเชื่อมต่อ#

1. แผง Network แสดง sdk.js โหลดด้วย HTTP 200
2. เป้าหมายที่จับคู่ data-product-code ตรงกับแคตตาล็อกอย่างถูกต้อง
3. เฉพาะสินค้าที่เหมาะสมเท่านั้นที่แสดงปุ่มที่สร้างหรือเขียนขึ้น
4. การเปลี่ยนสินค้าแบบไดนามิกอัปเดตเป้าหมายก่อนลูกค้าคลิก
5. การคลิกปุ่มเปิด ideal.house Viewer พร้อมสินค้าที่เลือก

การตั้งค่าขั้นสูง#

โทเคนเริ่มต้นที่สร้างโดยเซิร์ฟเวอร์#

ใช้โหมดนี้เมื่อระบบหลังบ้านของคุณออกโทเคนเริ่มต้นอายุสั้น Client Secret ต้องไม่ปรากฏใน JavaScript ของเบราว์เซอร์

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

ขนาดสินค้าแบบกำหนดเอง#

ระบุความกว้าง ความสูง และหน่วยตัวพิมพ์เล็ก (ft, in หรือ cm) พร้อมกันบนองค์ประกอบที่จับคู่ SDK จะอ่านค่าล่าสุดเมื่อคลิก

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>