Squarespace-Integration#
Installieren Sie Room Visualizer auf Squarespace mit Code Injection und platzieren Sie produktspezifische Container dort, wo der Seiten-Editor benutzerdefinierten Code zulässt.
Überprüfungsstatus: Die Dokumentation des Squarespace-Hilfecenters wurde am 7. September 2026 geprüft. Es stand keine Squarespace-Website eines Kunden zur Verfügung. Code Injection und JavaScript-Codeblöcke erfordern einen geeigneten Tarif. Benutzerdefinierter Code ist vom Squarespace-Support ausgenommen und kann durch das Laden per Ajax beeinflusst werden.
Vor dem Laden des SDK: Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Berücksichtigen Sie den veröffentlichten Hostnamen sowie alle verwendeten Vorschau- oder Staging-Origins; trennen Sie mehrere Origins durch Kommas. Siehe Konfigurationsschritte.
Umfang und Voraussetzungen#
Dieser Ansatz eignet sich vor allem für einen kleinen Katalog mit stabilen Produktseiten oder für eine Website, bei der Sie eine explizite Datenschicht für Produktcodes kontrollieren. Sie benötigen einen geeigneten Tarif, Zugriff als Website-Eigentümer, Shop ID, Publishable Key und importierte ideal.house-SKUs.
Squarespace bietet in dieser Anleitung keine ideal.house-Erweiterung. Seine Standard-Produktbearbeitung gewährleistet keine stabilen öffentlichen JavaScript-API für eine ausgewählte Variante-SKU, weshalb das Abgleich auf Variantenebene Kundenadapterarbeit erfordert und auf jedem Template möglicherweise nicht praktikabel ist.
Minimale SDK-Schnittstelle#
<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>
Der Produktcode muss exakt mit dem importierten Katalog-sku übereinstimmen. Verwenden Sie keinen Client Secret in Code Injection.
Loader installieren#
Öffnen Sie Website → Seiten → Benutzerdefinierter Code → Code Injection (die Bezeichnung kann je nach Website-Version abweichen). Fügen Sie das SDK-<script> im Footer ein, ersetzen Sie beide Platzhalter und speichern Sie. Die Footer-Einbindung erfolgt auf Website-Seiten vor </body>; Checkout-Seiten unterstützen keinen eingebundenen Code.
Installieren Sie den Loader nur einmal. Falls eine andere Integration ihn bereits hinzugefügt hat, entfernen Sie die Duplikation.
Eine Produktschaltfläche platzieren#
Platzieren Sie dort, wo der Seiten-Editor einen JavaScript-fähigen Code Block erlaubt:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Verwenden Sie die SKU dieses exakten Produkts. In Squarespace 7.1 können Store-/Product-Details-Layouts möglicherweise keine beliebigen Blöcke im primären Produktinformationsbereich akzeptieren. Eine praktische Fallback-Lösung ist eine normale Layoutseite mit einem Product Block sowie einem benachbarten Code Block, ein Paar pro Produkt. Bestätigen Sie, dass die Shopseite aktiviert bleibt, da Product Blocks davon abhängen.
Bei größeren Katalogen kann ein Entwickler Container injizieren, indem er eine stabile, kundenbesitzte Zuordnung wie URL-Pfad zu SKU herstellt:
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);
}
Die URL-Zuordnung, das Einfügen des Hostelements und der Navigations-Callback sind kundenseitiger Code. Lesen Sie keinen internen Squarespace-Zustand automatisiert aus und setzen Sie keine stabile Struktur voraus.
Varianten, Quick View und Ajax-Loading#
Wenn ein Squarespace-Produkt mehrere Varianten mit unterschiedlichen ideal.house-Assets hat, zeigen Sie eine Schaltfläche erst an, wenn Ihr Adapter die ausgewählte Varianten-SKU aus einer unterstützten Quelle ermitteln kann. Ersetzen Sie bei jeder Änderung den alten Container durch einen neuen. Gibt es keinen unterstützten Auswahl-Callback beziehungsweise keine unterstützte Datenquelle, verwenden Sie eine gemeinsame SKU auf Produktebene nur dann, wenn alle Varianten dasselbe visuelle Asset nutzen; andernfalls lassen Sie die Schaltfläche weg.
Schnellansichten, Produktblöcke und das Laden von Seiten per Ajax können Seiteninhalte ersetzen. Squarespace weist darauf hin, dass Ajax-Laden mit benutzerdefiniertem Code kollidieren kann. Testen Sie die konkrete Vorlage. Deaktivieren Sie bei Bedarf Ajax-Laden oder rufen Sie renderForPath() über einen von Ihnen kontrollierten Navigationsmechanismus auf. Ein MutationObserver ist nur eine letzte Möglichkeit für den kundenseitigen Adapter und sollte auf den Produktbereich beschränkt werden.
Produktdaten importieren#
Pflegen Sie eine Tabelle von Squarespace Produkt-/Varianten-SKU zu ideal.house sku und nutzen Sie anschließend Produkt-Upload. Der vollständige öffentliche Arbeitsablauf ist dokumentiert unter Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen und Fehler & Wiederholungen.
Das Browser-SDK synchronisiert keine Squarespace-Produkte. Jeder Commerce-API-Export, Webhook oder geplanter Job liegt in Kundenverantwortung.
Überprüfen und entfernen#
Testen Sie die veröffentlichte Site in einem inkognito Fenster, da angemeldete Bearbeitungen benutzerdefinierten Code unterdrücken können. Prüfen Sie ein zugeordnetes Produkt, ein fehlendes SKU, ein unbekanntes SKU, Product Blocks, Quick View, Ajax-Navigation, Browser-Zurück/Vor, mobiles Layout, Cookie-Einwilligung sowie Kassenausschluss. Bestätigen Sie eine erfolgreiche SDK-Anfrage sowie exakte Product-Code-/SKU-Gleichheit.
Zum Entfernen löschen Sie die Footer-Injection sowie alle Code Blocks/Hosts/Zuordnungsskripte, speichern Sie und leeren Sie Caches. Überprüfen Sie, dass auf der veröffentlichten Seite keine SDK-Anfrage oder kein data-idealhouse-*-Element vorhanden ist.