Ideal House
Przejdź do treści

Integracja deweloperska niestandardowej witryny sklepu#

Załaduj SDK ideal.house i zmapuj wartości productCode witryny sklepu na Katalog.

<!-- DASHBOARD_READINESS -->

Przed załadowaniem SDK: Otwórz Panel → Ustawienia, dodaj adres źródłowy witryny sklepu do Allowed Origins (CORS) i kliknij Zapisz. Uwzględnij rzeczywistą nazwę hosta opublikowanego sklepu oraz używane adresy podglądu i środowisk testowych; wiele adresów oddzielaj przecinkami. Zobacz instrukcję konfiguracji.

1. Załaduj SDK#

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

2. Wybierz jedną umowę przycisku#

Opcja A: przycisk generowany przez SDK#

Zrenderuj kontener docelowy. Po walidacji produktu SDK tworzy swój przycisk potomny.

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

Opcja B: przycisk utworzony przez autora#

Zrenderuj i stylizuj przycisk samodzielnie. SDK zachowuje DOM i wiąże kwalifikację oraz zachowanie kliknięcia.

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

3. Utrzymuj productCode identyczne z Katalogiem#

<PRODUCT_CODE>

  • productCode Katalogu i data-product-code witryny sklepu muszą być identyczne, włącznie z wielkością liter.
  • Nie generuj productCode ze zmiennej nazwy produktu przy każdym renderowaniu; jeśli kod musi się zmienić, zaktualizuj jednocześnie katalog i witrynę sklepu.

4. Obsługa dynamicznych stron i wybranych produktów#

SDK obserwuje elementy docelowe dodane po załadowaniu strony. Przy zmianie wybranego produktu aplikacja nadal musi aktualizować atrybuty elementu i resetować stary stan SDK.

Zaktualizuj przycisk utworzony przez autora po zmianie wyboru#

js
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. Zweryfikuj integrację#

  1. Panel Network pokazuje sdk.js załadowany z HTTP 200.
  2. Wartość data-product-code dopasowanego elementu docelowego dokładnie odpowiada wartości w katalogu.
  3. Przycisk generowany lub własny jest widoczny tylko dla produktów dostępnych do wizualizacji.
  4. Dynamiczne zmiany produktów aktualizują cel przed kliknięciem klienta.
  5. Kliknięcie przycisku otwiera ideal.house Viewer z wybranym produktem.
<!-- DASHBOARD_CONFIGURATION -->

Zaawansowana konfiguracja#

Token startowy generowany po stronie serwera#

Użyj tego trybu, gdy Twój backend wydaje krótkotrwałe tokeny startowe. Client Secret nigdy nie może pojawić się w JavaScript przeglądarki.

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>
bash
# 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"}'

Niestandardowy rozmiar produktu#

Podaj szerokość, wysokość i małą jednostkę (ft, in lub cm) razem na dopasowanym elemencie. SDK odczytuje najnowsze wartości w momencie kliknięcia.

html
<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>