Integracja Wix#

Zintegruj Room Visualizer z Wix Stores przez powierzchnię rozszerzeń Wix odpowiadającą typowi Twojej witryny. Wix Editor i Wix Studio wymagają różnych podejść.

Status weryfikacji: Dokumentacja rozszerzeń Wix została przeanalizowana w dniu 7 września 2026. Nie było dostępnych danych uwierzytelniających witryny ani aplikacji klienta Wix, dlatego nie jest to certyfikacja end-to-end. SDK musi współdzielić DOM witryny sklepu ze swoim kontenerem; iframe HTML nie jest zamiennikiem.

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.

Wybierz poprawną ścieżkę Wix#

Wix dokumentuje, że osadzone skrypty Stores są niedostępne w Wix Studio i kieruje aplikacje do rozszerzenia pluginu witryny. Nie instaluj rozwiązania osadzonego skryptu Edytora i nie twierdź o pokryciu Studio.

Wymagania wstępne#

Przygotuj testową witrynę Wix z Wix Stores, uprawnienia do publikacji kodu niestandardowego lub rozszerzenia aplikacji, ideal.house Shop ID i Publishable Key oraz zaimportowane testowe SKU. Zdecyduj, czy wybrany wariant Wix ma własny SKU. Trzymaj wszystkie sekrety aplikacji i klucze backendowe API z dala od strony przeglądarki.

Minimalny znacznik SDK#

Tam, gdzie Wix pozwala Twojemu kodowi działać w dokumencie witryny sklepowej, obsługiwany znacznik ideal.house to:

<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 dokładnie odpowiadać zaimportowanemu ideal.house sku.

Wix Editor: instalacja dla jednej witryny#

W panelu Wix dodaj znacznik SDK przez Ustawienia → Kod niestandardowy, umieść go w body/końcu body i wybierz strony produktów, które go potrzebują. Opublikuj witrynę; tryb podglądu nie jest wystarczający do sprawdzenia produkcyjnego.

Następnie dodaj niestandardowy element strony produktu lub punkt rozszerzenia Wix Stores, który generuje kontener w tym samym dokumencie najwyższego poziomu. Unikaj Wix HTML Embed dla przycisku: działa wewnątrz iframe, więc skrypt w dokumencie nadrzędnym nie może odkryć jego kontenera, a skrypt w iframe nie może kontrolować strony produktu.

Element do umieszczenia powinien udostępniać jedną operację we własnym kodzie:

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Wywołuj go tylko po tym, jak Wix zgłosi kompletny bieżący produkt/wariant przez API dostępny dla Twojej strony lub rozszerzenia. To jest kod adaptera klienta; celowo nie nazywa on nieweryfikowanego zdarzenia strony Wix.

Aplikacja Wix: Osadzony skrypt dla Wix Editor Stores#

Wix Stores dostarcza lokalizacje details-placeholder i bottom-placeholder dla rozszerzeń osadzonych skryptów. Dołącz host do jednego z tych placeholderów; nie zastępuj jego zawartości, ponieważ inne aplikacje mogą go współdzielić. Skonfiguruj skrypt SDK jako osobny osadzony fragment lub utwórz go programistycznie z dokładnymi atrybutami src, data-shop-id i data-publishable-key.

Wix Site API dostępny dla osadzonych skryptów tworzonych przez CLI może odczytywać kontekst witryny sklepowej. Rozstrzygnij bieżący wariant SKU przez obsługiwane Stores API Wix, a następnie wywołaj swój most setIdealhouseSku(). Pozostaw placeholder pusty, dopóki nie istnieje kompletny SKU.

Wix Studio: plugin witryny#

Utwórz plugin witryny Wix Stores skierowany do udokumentowanego gniazda strony produktu. Wyrenderuj kontener z UI pluginu i załaduj SDK w dokumencie witryny renderowanym przez Wix. Plugin musi przekazać swój rozstrzygnięty bieżący wariant SKU do kontenera DOM. Nazwy gniazd i API komponentów Wix Studio mogą ewoluować; wybieraj je z bieżącej referencji CLI/API podczas generowania rozszerzenia, a nie kopiuj nazwy z tego przewodnika.

Nie używaj gniazda pluginu, który renderuje kontrolę wewnątrz izolowanego iframe: SDK i jego widok nie zostały zweryfikowane dla tej granicy. Wybierz punkt rozszerzenia Wix, który umieszcza kontener w dokumencie witryny sklepowej, lub użyj headless witryny sklepowej, gdzie kontrolujesz dokument.

Mapowanie produktów i nawigacja#

Zmapuj sku produktu lub wariantu Wix na sku w ideal.house. Nie podstawiaj po cichu identyfikatora produktu Wix jako wartości zapasowej: wygenerowany identyfikator nie będzie pasował do SKU w katalogu, chyba że celowo go zaimportowano.

Strony produktów Wix mogą zastępować treść podczas wyboru opcji lub nawigacji klienckiej. Przy każdym udokumentowanym wywołaniu zwrotnym produktu/wyboru:

1. wyczyść poprzednio wyrenderowany kontener;
2. rozstrzygnij kompletny wybrany wariant;
3. wstaw nowy kontener z jego SKU;
4. pozostaw host pusty, gdy nie istnieje kompletny lub wizualizowalny SKU.

Dla galerii i repeaterów każdy element potrzebuje własnego SKU poziomu elementu. Produkty szybkiego podglądu i modalnego wymagają tego samego mostu cyklu życia w gnieździe modalnym.

Import produktów#

Wix Stores nie synchronizuje się automatycznie z ideal.house. Eksportuj pola produktów i wariantów Wix, ustaw każdy żądany Wix SKU jako sku i użyj Przesyłanie produktów. Zobacz import produktów, status zadania, lista produktów, aktualizacja produktów, usuwanie produktu i błędy i ponowienia.

Automatyczna synchronizacja Wix-do-ideal.house, przepływ instalacji aplikacji lub procesor webhook Wix to praca należąca do klienta; ten przewodnik tego nie gwarantuje.

Zweryfikuj przed publikacją#

1. Przetestuj opublikowaną witrynę w prywatnym oknie przeglądarki na komputerze i urządzeniu mobilnym.
2. Potwierdź, że SDK ładuje się raz w tym samym dokumencie co kontener.
3. Porównaj kod produktu w DOM z zaimportowanym SKU: muszą być identyczne.
4. Zmieniaj każdą opcję, aż wybrany zostanie końcowy wariant; potwierdź, że stary kontener został usunięty, a nowy pojawił się.
5. Przetestuj nawigację kliencką Wix, strony galerii/repeatera produktów, szybki podgląd, cofanie/awansowanie w przeglądarce, ustawienia zgody oraz tryby członkowski/zalogowany.
6. Potwierdź, że nieznany lub pusty SKU nie pozostawia uszkodzonego kontrolera wizualizatora.
7. Dla aplikacji przetestuj instalację, włączanie, wyłączanie i odinstalowanie w osobnych testowych witrynach Wix Editor i Studio, w zakresie obsługiwanym.

Usuń integrację#

Usuń lub wyłącz wpis Wix Kod niestandardowy i usuń element strony produktu. Dla aplikacji usuń osadzony skrypt lub rozszerzenie pluginu witryny i odinstaluj je z testowej witryny. Opublikuj, a następnie potwierdź, że żądanie skryptu i wszystkie węzły data-idealhouse-* zniknęły.

Oficjalne referencje platformy#

• Wix: Dostosuj Wix Stores za pomocą osadzonych skryptów
• Wix: O osadzonych skryptach
• Wix: O rozszerzeniach witryny
• Wix: Niestandardowe elementy