Ideal House
Przejdź do treści

Integracja Webflow#

Użyj niestandardowego kodu Webflow i pól CMS/Ecommerce, aby renderować przyciski Room Visualizer, których Product Code odpowiada katalogowi ideal.house.

Status weryfikacji: Dokumentacja Centrum Pomocy Webflow sprawdzona w dniu 7 września 2026. Brak dostępnego witryny Webflow klienta. Kod niestandardowy działa po podglądzie/opublikowaniu, a Webflow nie uruchamia kodu po stronie serwera w Embed, więc przetestuj opublikowany domenę staging.

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.

Wymagania wstępne i ograniczenia#

Wymagane jest uprawnienie do używania niestandardowego kodu lub Code Embed, domena staging, Shop ID, Publishable Key oraz jedno zaimportowane katalogowe SKU. Wymagania planu Webflow dotyczą osadzeń JavaScript. Przeglądarka może zawierać Publishable Key, ale nigdy Client Secret ani klucz AI API.

SDK nie odczytuje Ecommerce Webflow automatycznie. Twój szablon musi ujawniać SKU, lub adapter klienta musi wyprowadzić go z zaufanego pola CMS.

Minimalny kontrakt 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>

data-product-code musi dokładnie równać się zaimportowanemu sku od ideal.house.

Instalacja loadera#

Otwórz Ustawienia witryny → Kod niestandardowy i dodaj tag skryptu SDK do obszaru stopki/końca body. Zamień placeholdery, zapisz i opublikuj. Zainstaluj go raz na poziomie witryny; nie powtarzaj go w każdym elemencie CMS.

Płótno projektanta Webflow może nie uruchamiać skryptu. Zweryfikuj na podglądzie lub opublikowanej URL staging i sprawdź rzeczywiste źródło strony.

Dodanie przycisku na poziomie elementu#

Utwórz pole CMS z czystym tekstem o nazwie, na przykład, Idealhouse SKU. Wypełnij je tą samą wartością, która została zaimportowana jako sku od ideal.house. W szablonie kolekcji Produktu lub CMS dodaj Code Embed tam, gdzie należy umieścić przycisk:

html
<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

Użyj kontrolki Dodaj pole od Webflow w edytorze Embed, aby wstawić wartość bieżącego elementu; instrukcja w nawiasach powyżej nie jest literalnym znacznikiem produkcyjnym. Po opublikowaniu sprawdź DOM i potwierdź, że stał się zwykłym łańcuchem znaków, takim jak:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Dla statycznej strony wklej literalny SKU. Nie używaj sluga strony ani ID elementu Webflow, chyba że ta dokładna wartość to zaimportowany SKU od ideal.house.

Warianty i renderowanie dynamiczne#

Standardowe wiązanie projektanta Webflow może nie ujawniać końcowego wariantu SKU dowolnemu niestandardowemu kodowi we wszystkich układach Ecommerce. Jeśli każda opcja wizualna wymaga innego zasobu ideal.house, zbuduj adapter klienta, który otrzymuje wybrany wariant z wspieranej integracji Webflow lub własnej warstwy danych, a następnie zastępuje kontener:

js
function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

To jest kod klienta. Wywołuj go z udokumentowanego wywołania zwrotnego w narzędziu wariantów, którego faktycznie używasz. Nie scrapuj wyświetlanego tekstu opcji ani nie zakładaj nieoficjalnego zdarzenia Webflow.

Interakcje Webflow, filtry CMS, paginacja stron trzecich i przejścia typu SPA mogą dodawać lub zastępować elementy kolekcji. Włącz Embed wewnątrz każdego szablonu elementu lub wywołaj mostek po udokumentowanym wywołaniu zwrotnym renderowania narzędzia. Zawsze twórz nowy kontener, zamiast klonować przetworzone znaczniki SDK.

Import danych katalogu#

Eksportuj pola Produktu/CMS od Webflow i zmapuj Idealhouse SKU do sku. Wgraj przez Przesyłanie produktów i postępuj zgodnie z import produktów, status zadania, lista produktów, aktualizacja produktów, usuwanie produktu oraz błędy i ponowienia.

Brak automatycznej synchronizacji Webflow dostarczonej przez SDK przeglądarki. Każdy eksport API CMS, webhook lub automatyzacja należy do klienta.

Weryfikacja i usuwanie#

Opublikuj do stagingu i przetestuj zmapowany element, brakujące pole, nieznany SKU, listę kolekcji, szablon produktu, filtry/paginację, modal, breakpoint mobilny, kontrolki zgody oraz przyciski Wstecz/Dalej w przeglądarce. Potwierdź, że SDK ładuje się raz, każdy wyrenderowany kod odpowiada bieżącemu elementowi i żadne dane uwierzytelniające serwera nie pojawiają się w HTML.

Aby usunąć, usuń niestandardowy kod SDK na poziomie witryny i każde wiązanie Embed/przycisku, opublikuj ponownie i wyczyść dowolną cache proxy/CDN. Potwierdź, że żądanie skryptu i elementy data-idealhouse-* zniknęły z opublikowanej witryny.

Oficjalne odniesienia platformy#