เริ่มต้นใช้งาน SDK#

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

1. เตรียมร้านค้าและสินค้า#

เลือกร้านของคุณใน แดชบอร์ด รับ Shop ID และ Publishable Key ของร้านนั้น เปิด แดชบอร์ด → การตั้งค่า เพิ่มต้นทางของหน้าร้านของคุณลงใน Allowed Origins (CORS) และคลิก บันทึก ตรวจสอบให้แน่ใจว่าสินค้าอย่างน้อยหนึ่งรายการพร้อมสำหรับการแสดงภาพ หากนำเข้าจากฝั่งแบ็กเอนด์ของคุณ ให้ปฏิบัติตาม Product Import API และตรวจสอบผลลัพธ์ของงานสุดท้าย

2. เลือกคู่มือแพลตฟอร์ม#

ใช้ Shopify สำหรับธีม Liquid, WooCommerce สำหรับหน้าร้านออนไลน์ WooCommerce หรือ หน้าร้านออนไลน์แบบกำหนดเอง สำหรับเว็บไซต์ของคุณ คู่มือแพลตฟอร์มเพิ่มเติมมีรายการอยู่ใน ภาพรวม SDK

3. โหลด SDK ครั้งเดียว#

สำหรับหน้าร้านออนไลน์แบบกำหนดเอง โหลดสคริปต์นี้ครั้งเดียวในหน้าโฮสต์ แทนที่ค่าคงที่ทั้งสองด้วยค่าจากร้านค้าเดียวกัน

html

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

4. เรนเดอร์เป้าหมายที่ตรงกัน#

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

html

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

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

5. ทดสอบเส้นทางของลูกค้า#

ตรวจสอบว่า sdk.js โหลดสำเร็จ ปุ่มที่ถูกต้องปรากฏขึ้น และการคลิกเปิด Viewer ด้วยสินค้าที่กำหนด เปลี่ยนตัวแปรสินค้า นำทางไปยังสินค้าอื่น และทำซ้ำบนมือถือ ทำ รายการตรวจสอบก่อนเปิดตัว ให้เสร็จสมบูรณ์ก่อนเผยแพร่