การเชื่อมต่อ Vue / Nuxt#

ใช้ ideal.house browser SDK โดยตรงใน Vue หรือ Nuxt และรักษาความซิงค์ของคอนเทนเนอร์ปุ่มที่สร้างไว้กับสถานะสินค้าแบบ reactive ไม่มีแพ็กเกจ npm ของ ideal.house Vue ในคู่มือนี้

สถานะการตรวจสอบ: มาร์กอัพ SDK ได้รับการตรวจสอบเทียบกับเทมเพลตแดชบอร์ดปัจจุบัน; เอกสารทางการของ Vue และ Nuxt ได้รับการตรวจสอบเมื่อวันที่ 7 กันยายน 2569 ไม่พบแอปพลิเคชันของลูกค้าหรือข้อมูลรับรองการผลิตที่มีอยู่

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

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

เตรียม Shop ID, Publishable Key, SKU ที่นำเข้าแล้ว และบันทึกตัวแปรสินค้าที่เลือกแบบ reactive Shop ID และ Publishable Key อาจมองเห็นได้จากฝั่งไคลเอนต์ เก็บ Client Secrets, คีย์ AI API และข้อมูลรับรองการนำเข้าสินค้าไว้บนเซิร์ฟเวอร์

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

Product Code ต้องเท่ากับ sku ของแคตตาล็อกอย่างถูกต้อง

คอมโพเนนต์ Vue#

ให้คอนเทนเนอร์มี key เพื่อให้ Vue สร้างโหนดสะอาดเมื่อ SKU ที่เลือกเปลี่ยน:

vue

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ productCode?: string | null }>()
const code = computed(() => props.productCode?.trim() || '')
</script>

<template>
  <div
    v-if="code"
    :key="code"
    data-idealhouse-button-container
    :data-product-code="code"
  />
</template>

ส่ง SKU ของตัวแปรสินค้าที่เลือกแบบมาตรฐาน สำหรับตัวเลือกที่ไม่สมบูรณ์ ให้เรนเดอร์ว่างเปล่าแทนการทิ้งรหัสเดิมไว้ให้เห็น

โหลดเดอร์ Nuxt#

useHead ของ Nuxt รองรับแท็กสคริปต์ภายนอก ลงทะเบียนเพียงครั้งเดียวใน app.vue หรือเลย์เอาต์ที่ครอบคลุมหน้าสินค้า:

vue

<script setup lang="ts">
const config = useRuntimeConfig()

useHead({
  script: [
    {
      key: 'idealhouse-room-visualizer-sdk',
      src: 'https://sdk.ideal.house/sdk.js',
      async: true,
      'data-shop-id': config.public.idealhouseShopId,
      'data-publishable-key': config.public.idealhousePublishableKey,
    },
  ],
})
</script>

ตั้งค่าเฉพาะค่าสาธารณะภายใต้ runtimeConfig.public สำหรับ Vue แบบธรรมดา ให้เพิ่มสคริปต์เพียงครั้งเดียวใน HTML ของแอปพลิเคชัน หรือสร้างใน onMounted() ของคอมโพเนนต์รากพร้อมการตรวจสอบซ้ำด้วย querySelector API ของ DOM เบราว์เซอร์ต้องทำงานฝั่งไคลเอนต์

ตัวแปรและการนำทางแบบไดนามิก#

ผูก selectedVariant.sku เข้ากับคอมโพเนนต์ โหนดที่มี key จัดการการเปลี่ยนตัวเลือกได้โดยไม่ต้องใช้วิธีการ SDK ที่ไม่มีเอกสารระบุไว้ เมื่อข้อมูลเส้นทางของ Nuxt เปลี่ยนแปลงขณะที่อินสแตนซ์คอมโพเนนต์ถูกนำกลับมาใช้ใหม่ รหัสที่คำนวณได้จะอัปเดตและคอนเทนเนอร์เก่าจะถูกทำลาย

สำหรับกริดสินค้า ทุกการ์ดต้องมี SKU ระดับรายการและ key ที่มั่นคงของ Vue การเลื่อนแบบไม่สิ้นสุดและตัวกรองควรเรนเดอร์คอมโพเนนต์ใหม่จากสถานะ ห้ามคัดลอก DOM ที่ SDK เติมข้อมูลไว้แล้ว ลิ้นชักดูแบบด่วนควร unmount เมื่อปิด และสินค้าใหม่ควรได้รับ key คอมโพเนนต์ใหม่

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

นำเข้าข้อมูลสินค้า#

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

ไคลเอนต์พาณิชย์หลังบ้าน, เว็บฮุค, ซิงค์ตามกำหนดเวลา และข้อมูลรับรองส่วนตัวของคุณอยู่ภายนอกเบราว์เซอร์ SDK

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

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

เพื่อลบ ให้ลบ useHead/ตัวโหลดรูตและคอมโพเนนต์ปุ่มทั้งหมด ลบการกำหนดค่ารันไทม์สาธารณะ สร้างใหม่ และตรวจสอบว่า SDK URL และมาร์กอัป data-idealhouse-* หายไป