Integracja Shopware 6#
Dodaj Room Visualizer za pomocą wtyczki Shopware 6 lub niestandardowego motywu i użyj numeru produktu wybranego kanału sprzedaży jako kodu produktu ideal.house.
Status weryfikacji: Dokumentacja witryny sklepu Shopware sprawdzona 7 września 2026. Brak dostępnego sklepu klienta. Ta ścieżka dotyczy standardowej witryny sklepu Shopware 6 w Twig; witryny headless/composable wymagają adaptera specyficznego dla danego frameworka.
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#
Przygotuj sklep deweloperski, dostęp do kodu źródłowego wtyczki/motywu, kanał sprzedaży testowy, Shop ID, Publishable Key oraz zaimportowane numery produktów. Pracuj w wtyczce lub motywie potomnym, zamiast zmieniać rdzeń Storefront lub motyw dostawcy.
Minimalna umowa SDK#
<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>
Zmapuj Shopware productNumber dokładnie do ideal.house sku. SDK nie zapytuje Store API Shopware.
Rozszerz szablon produktu#
W swojej wtyczce rozszerz szablon/blok Twig używany w pobliżu widżetu zakupu w zainstalowanej wersji Shopware. Wyrenderuj host używając bieżącego produktu kanału sprzedaży:
{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
{% block buy_widget_buy_container %}
{{ parent() }}
{% if page.product.productNumber %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ page.product.productNumber|escape }}">
</div>
</div>
{% endif %}
{% endblock %}
Nazwy bloków i kontekst mogą się zmieniać między wydaniem Shopware a motywami. Zbadaj szablon aktywnej wersji, wybierz najwęższy blok rozszerzenia i upewnij się, że page.product jest tam dostępny. Dla karty produktu użyj zamiast tego kontekstu produktu karty.
Załaduj SDK#
Wtyczki Shopware mogą dodawać JavaScript witryny sklepu i nadpisywać szablony. Dodaj lokalny wpis witryny sklepu, który tworzy skrypt SDK tylko raz:
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const script = document.createElement('script');
script.src = 'https://sdk.ideal.house/sdk.js';
script.async = true;
script.dataset.shopId = '<SHOP_ID>';
script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
document.head.append(script);
}
Skompiluj zasoby witryny sklepu i aktywuj wtyczkę/motyw, korzystając z procesu dla swojej wersji Shopware. Używaj wartości konfiguracyjnych dla danych uwierzytelniających w wielokrotnym wtyczce; renderuj tylko bezpieczny dla przeglądarki Publishable Key.
Warianty i treści dynamiczne#
Shopware często reprezentuje warianty zakupowe jako odrębne produkty z własnym productNumber i kanonicznym URL. Przy pełnej nawigacji serwerowo renderowany Twig naturalnie emituje nowy kod. Jeśli Twój motyw przełącza warianty bez ładowania strony, podłącz jego udokumentowane wywołanie zwrotne zakończenia do:
function replaceIdealhouseProduct(host, productNumber) {
host.replaceChildren();
const code = String(productNumber || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Ten kod łączący implementuje klient, ponieważ motywy i wtyczki wariantów stron trzecich różnią się. Listy ładowane przez filtry/komponenty off-canvas muszą renderować lub tworzyć ponownie czyste kontenery po nadejściu nowego DOM. Nie klonuj elementów potomnych generowanych przez SDK.
Import produktów#
Eksportuj każdy produkt/wariant Shopware productNumber jako ideal.house sku. Importuj przez Przesyłanie produktów, a następnie użyj import produktów, status zadania, lista produktów, aktualizacja produktów, usuwanie produktu oraz błędy i ponowienia.
Synchronizacja Store API/Admin API, zadania zaplanowane lub integracja Flow Builder/webhook to odrębny kod klienta.
Weryfikacja i usunięcie#
Przetestuj produkt nadrzędny, każdy wizualizowalny wariant, brakujące i nieznane numery produktów, listy, filtry, off-canvas/podgląd szybki, nawigację wstecz/do przodu w przeglądarce, układ mobilny, zachowanie cache/proxy oraz wszystkie istotne kanały sprzedaży/domeny. Potwierdź jedno żądanie SDK i dokładne dopasowanie productNumber/SKU.
Aby usunąć, dezaktywuj/odinstaluj wtyczkę lub usuń Twig motywu potomnego i JavaScript, przebuduj zasoby witryny sklepu, wyczyść cache i upewnij się, że nie pozostaje żadne żądanie SDK ani kontener.