integracja Vue / Nuxt#

Użyj przeglądarkowego SDK ideal.house bezpośrednio w Vue lub Nuxt i utrzymuj jego kontener generowanego przycisku zsynchronizowany z reaktywnym stanem produktu. W tym przewodniku nie ma pakietu npm ideal.house Vue.

Status weryfikacji: Znacznikowanie SDK zostało sprawdzone w odniesieniu do bieżącego szablonu Dashboard; oficjalna dokumentacja Vue i Nuxt została sprawdzona 7 września 2026. Nie było dostępnej aplikacji klienta ani danych uwierzytelniających produkcyjnych.

Przed załadowaniem SDK: Otwórz Panel → Ustawienia, dodaj źródło swojej witryny sklepowej do Allowed Origins (CORS) i kliknij Zapisz. Uwzględnij opublikowany nazwę hosta oraz wszelkie źródła podglądu lub stagingu, których używasz; oddziel wiele źródeł przecinkami. Zobacz kroki konfiguracji.

Wymagania wstępne i granice#

Przygotuj Shop ID, Publishable Key, zaimportowany SKU oraz reaktywny rekord wybranego wariantu. Shop ID i Publishable Key mogą być widoczne po stronie klienta. Zachowuj Client Secrets, klucze AI API i dane uwierzytelniające importu produktów po stronie serwera.

Minimalna umowa 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>

Kod produktu musi być dokładnie równy sku katalogu.

komponent Vue#

Przypisz kontenerowi key, aby Vue utworzył czysty węzeł, gdy wybrany SKU się zmienia:

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>

Przekaż kanoniczny SKU wybranego wariantu. Renderuj nic dla niekompletnego wyboru zamiast pozostawiać poprzedni kod widocznym.

loader Nuxt#

useHead w Nuxt obsługuje zewnętrzne etykiety skryptów. Zarejestruj go raz w app.vue lub w układzie obejmującym strony produktów:

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>

Konfiguruj wyłącznie wartości publiczne pod runtimeConfig.public. Dla zwykłego Vue dodaj skrypt raz do powłoki aplikacji HTML lub utwórz go w onMounted() komponentu głównego z kontrolą duplikatów querySelector. API DOM przeglądarki muszą działać po stronie klienta.

Warianty i dynamiczna nawigacja#

Przypisz selectedVariant.sku do komponentu. Węzeł z kluczem obsługuje zmiany opcji bez niedokumentowanej metody SDK. Gdy dane trasy Nuxt zmieniają się, gdy instancja komponentu jest ponownie używana, wyliczony kod jest aktualizowany, a stary kontener jest niszczony.

Dla siatek produktów każda karta potrzebuje SKU na poziomie elementu i stabilnego klucza Vue. Przewijanie bezkońcowe i filtry powinny renderować nowe komponenty ze stanu; nigdy nie kopiuj DOM, które SDK już wypełniło. Szuflady podglądu szybkiego powinny odmontowywać się przy zamknięciu, a nowy produkt powinien otrzymać nowy klucz komponentu.

Jeśli SSR i hydratacja nie znają tego samego SKU, nie wyświetlaj przycisku, dopóki stan produktu po stronie klienta nie będzie gotowy, lub zserializuj kanoniczny SKU w danych strony. Unikaj odczytywania SKU wyłącznie z wyrenderowanego tekstu opcji.

Import danych produktów#

Zmapuj kanoniczny SKU każdego wariantu handlowego na ideal.house sku. Użyj Przesyłanie produktów i przewodników import produktów, status zadania, lista produktów, aktualizacja produktów, usuwanie produktu oraz błędy i ponowienia.

Twój kliencki backend handlowy, webhooks, zaplanowana synchronizacja i prywatne dane uwierzytelniające pozostają poza przeglądarkowym SDK.

Weryfikacja i usuwanie#

Przetestuj SSR/hydratację, twarde przeładowanie, nawigację kliencką, przyciski Wstecz/Dalej w przeglądarce, każdy wariant, puste/nieznane kody SKU, powtarzane karty, podgląd szybki, <KeepAlive>, stany ładowania, mobilność, zgodę oraz build produkcyjny. Potwierdź dokładnie jedno żądanie SDK i dokładną równość Product Code/SKU w DOM. Przeszukaj zbudowane zasoby pod kątem sekretów.

Aby usunąć, usuń loader główny/useHead i wszystkie komponenty przycisków, usuń publiczną konfigurację runtime, zbuduj ponownie i zweryfikuj, czy znacznikowanie SDK URL i data-idealhouse-* jest nieobecne.