Vue / Nuxt entegrasyonu#

ideal.house tarayıcı SDK'ünü doğrudan Vue veya Nuxt içinde kullanın ve üretilen düğme konteynerini tepkisel ürün durumuyla senkronize tutun. Bu kılavuzda ideal.house Vue npm paketi yoktur.

Doğrulama durumu: SDK işaretleme, güncel Panel şablonuna karşı kontrol edildi; Vue ve Nuxt resmi dokümantasyonu 7 Eylül 2026 tarihinde incelendi. Müşteri uygulaması veya üretim kimlik bilgileri kullanılamadı.

SDK yüklenmeden önce: Panel → Ayarlar sayfasını açın, mağaza vitrini kökeninizi Allowed Origins (CORS) listesine ekleyin ve Kaydet düğmesine tıklayın. Yayımlanan ana bilgisayar adını ve kullandığınız önizleme veya test ortamı kökenlerini dahil edin; birden fazla kökeni virgülle ayırın. yapılandırma adımları bölümüne bakın.

Ön koşullar ve sınırlar#

Shop ID, Publishable Key, içe aktarılmış bir SKU ve tepkisel seçili-çeşitlilik kaydını hazırlayın. Shop ID ve Publishable Key istemci tarafında görünür olabilir. Client Secrets, AI API anahtarlarını ve ürün içe aktarma kimlik bilgilerini sunucuda tutun.

Minimal SDK sözleşmesi#

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>

Ürün Kodu, kataloğ sku'sına tam olarak eşit olmalıdır.

Vue bileşeni#

Seçili SKU değiştiğinde Vue'ın temiz bir düğüm oluşturması için konteynere bir key verin:

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>

Kanonik seçili çeşitlilik SKU'ünü iletin. Eksik bir seçim için önceki kodu görünür bırakmak yerine hiçbir şey görüntülemeyin.

Nuxt yükleyici#

Nuxt'nin useHead'i harici betik etiketlerini destekler. Bunu, ürün sayfalarını kapsayan app.vue'da veya bir yerleşimde bir kez kaydedin:

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>

Yalnızca herkese açık değerleri runtimeConfig.public altında yapılandırın. Düz Vue için, betiği uygulama HTML'sine bir kez ekleyin veya kök bileşenin onMounted()'inde bir querySelector yinelenme kontrolüyle oluşturun. Tarayıcı DOM API'leri istemci tarafında çalışmalıdır.

Çeşitlilikler ve dinamik gezinme#

selectedVariant.sku'ü bileşene bağlayın. Anahtarlanmış düğüm, dokümante edilmemiş bir SDK yöntemi olmadan seçenek değişikliklerini işler. Bileşen örneği yeniden kullanılırken Nuxt rota verisi değiştiğinde, hesaplanan kod güncellenir ve eski konteyner yok edilir.

Ürün ızgaraları için, her kartın öğe düzeyinde bir SKU ve kararlı bir Vue anahtara ihtiyacı vardır. Sonsuz kaydırma ve filtreler, durumdan yeni bileşenler görüntülemelidir; asla SDK'in zaten doldurduğu DOM'ü kopyalamayın. Hızlı görüntüleme çekmeceleri kapatırken kaldırılmalı ve yeni bir ürün yeni bir bileşen anahtarı almalıdır.

Eğer SSR ve hidrasyon aynı SKU'u bilmiyorsa, istemci ürün durumu hazır olana kadar düğme görüntülemeyin veya kanonik SKU'i sayfa yükünde serileştirin. Bir SKU'i yalnızca görüntülenen seçenek metninden okumaktan kaçının.

Ürün verilerini içe aktarma#

Her ticaret çeşitliliğinin kanonik SKU'ünü ideal.house sku'e eşleyin. Ürün yükleme'yi ve ürünleri içe aktar, iş durumu, ürünleri listele, ürünleri güncelle, ürünü sil ve hatalar ve yeniden denemeler kılavuzlarını kullanın.

Arka uç ticaret istemciniz, webhooks, zamanlanmış senkronizasyon ve özel kimlik bilgileri tarayıcı SDK dışında kalır.

Doğrulama ve kaldırma#

SSR/hidrasyon, sert yeniden yükleme, istemci gezinme, tarayıcı Geri/İleri, her çeşitlilik, boş/bilinmeyen SKU'lar, yinelenen kartlar, hızlı görüntüleme, <KeepAlive>, yükleme durumları, mobil, onay ve üretim derlemesini test edin. Tam olarak tek bir SDK isteğini ve tam DOM Ürün Kodu/SKU eşitliğini doğrulayın. Derlenen varlıkları gizli anahtarlar açısından inceleyin.

Kaldırmak için, useHead/kök yükleyiciyi ve tüm düğme bileşenlerini silin, herkese açık çalışma zamanı yapılandırmasını kaldırın, yeniden derleyin ve SDK URL'ın ve data-idealhouse-* işaretleme bulunmadığını doğrulayın.