Integracja Squarespace#
Zainstaluj Room Visualizer na Squarespace za pomocą wstrzykiwania kodu i umieść kontenery specyficzne dla produktu tam, gdzie edytor stron pozwala na kod niestandardowy.
Status weryfikacji: Dokumentacja Centrum Pomocy Squarespace sprawdzona w dniu 7 września 2026. Brak dostępnego witryny Squarespace klienta. Wstrzykiwanie kodu i bloki kodu JavaScript wymagają kwalifikujących się planów, kod niestandardowy wykracza poza wsparcie Squarespace, a ładowanie Ajax może na niego wpływać.
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.
Zakres i wymagania wstępne#
Ta ścieżka jest najbardziej praktyczna dla małego katalogu ze stabilnymi stronami produktów lub witryny, w której kontrolujesz jawną warstwę danych kodu produktu. Wymagany jest kwalifikujący się plan, dostęp właściciela witryny, Shop ID, Publishable Key oraz zaimportowane SKUs ideal.house.
Squarespace nie dostarcza rozszerzenia ideal.house w tym przewodniku. Jego standardowy edytor produktu nie gwarantuje stabilnego publicznego API JavaScript dla wybranego wariantu SKU, więc dopasowanie na poziomie wariantu wymaga pracy adaptera klienta i może nie być praktyczne w każdym szablonie.
Minimalny kontrakt 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>
Product Code musi dokładnie odpowiadać zaimportowanemu katalogowemu sku. Nie używaj Client Secret w wstrzykiwaniu kodu.
Instalacja loadera#
Otwórz Witryna → Strony → Kod niestandardowy → Wstrzykiwanie kodu (etykieta może się różnić w zależności od wersji witryny). Wklej <script> SDK do Stopka, zamień oba placeholdery i zapisz. Wstrzykiwanie stopki działa na stronach witryny przed </body>; strony checkout nie obsługują wstrzykiwanego kodu.
Zainstaluj loader tylko raz. Jeśli inna integracja już go dodała, usuń duplikat.
Umieszczenie przycisku produktu#
Tam, gdzie edytor stron pozwala na blok kodu z włączonym JavaScript, umieść:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Użyj SKU tego dokładnego produktu. W Squarespace 7.1 układy Store/Product Details mogą nie akceptować dowolnych bloków w głównym obszarze informacji o produkcie. Praktycznym rozwiązaniem zastępczym jest zwykła strona układu z blokiem produktu oraz sąsiednim blokiem kodu, jedna para na produkt. Potwierdź, że strona sklepu pozostaje aktywna, ponieważ bloki produktów zależą od niej.
Dla większych katalogów developer może wstrzykiwać kontenery, dopasowując stabilne, należące do klienta mapowanie, takie jak ścieżka URL do SKU:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
Mapowanie URL, wstawianie hosta i wywołanie zwrotne nawigacji to kod klienta. Nie scrapuj prywatnego stanu Squarespace ani nie zakładaj, że jego kształt jest stabilny.
Warianty, szybki podgląd i ładowanie Ajax#
Jeśli jeden produkt Squarespace ma kilka wariantów z różnymi zasobami ideal.house, pokazuj przycisk dopiero po tym, jak Twój adapter może zidentyfikować wybrany wariant SKU z wspieranego źródła. Zastąp stary kontener czystym przy każdej zmianie. Jeśli nie istnieje wspierane wywołanie zwrotne/dane źródła wyboru, użyj jednego wspólnego SKU na poziomie produktu tylko wtedy, gdy wszystkie warianty dzielą ten sam zasób wizualny, lub pominij przycisk.
Szybki podgląd, bloki produktów i ładowanie stron Ajax mogą zastąpić treść strony. Squarespace ostrzega, że ładowanie Ajax może konfliktować z kodem niestandardowym. Przetestuj dokładny szablon; w razie potrzeby wyłącz ładowanie Ajax lub wywołaj renderForPath() z mechanizmu nawigacji, który kontrolujesz. MutationObserver to adapter klienta jako ostateczność i powinien być ograniczony do regionu produktu.
Import danych produktu#
Utrzymuj tabelę SKU produktu/wariantu od Squarespace do sku od ideal.house, a następnie użyj Przesyłanie produktów. Kompletny publiczny przepływ jest udokumentowany w import produktów, status zadania, lista produktów, aktualizacja produktów, usuwanie produktu oraz błędy i ponowienia.
SDK przeglądarki nie synchronizuje produktów Squarespace. Każdy eksport API Commerce, webhook lub zaplanowane zadanie należy do klienta.
Weryfikacja i usuwanie#
Przetestuj opublikowaną witrynę w oknie prywatnym, ponieważ edycja zalogowana może tłumić kod niestandardowy. Sprawdź jeden zmapowany produkt, jeden brakujący SKU, jeden nieznany SKU, bloki produktów, szybki podgląd, nawigację Ajax, przyciski Wstecz/Dalej w przeglądarce, układ mobilny, zgodę na pliki cookie i wykluczenie checkoutu. Potwierdź jedno pomyślne żądanie SDK i dokładną równość Product Code/SKU.
Aby usunąć, usuń wstrzykiwanie stopki i wszystkie bloki kodu/hosty/skrypty mapowania, zapisz i wyczyść cache. Zweryfikuj, że opublikowana strona nie ma żądania SDK ani elementu data-idealhouse-*.