Shoplazza-Integration#
Fügen Sie Room Visualizer zu Shoplazza mit einer Theme App Extension oder einem benutzerdefinierten Liquid-Theme hinzu und rendern Sie die ausgewählte Varianten-SKU als ideal.house Product Code.
Überprüfungsstatus: Shoplazza-Theme-, Erweiterungs-, Produkt- und Variantendokumentation geprüft am 7. September 2026. Da keine Partner-App oder Händler-Testshop verfügbar war, müssen Installation und Variantenumstellung in einem Entwicklungsshop validiert 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.
Voraussetzungen#
Bereiten Sie einen Shoplazza-Entwicklungs- oder Händlershop, Zugriff auf den Quellcode des Themes oder der App-Erweiterung, Shop ID, Publishable Key und importierte Datensätze für die unterstützten Varianten-SKUs vor. Duplizieren Sie das Händler-Theme vor der Anpassung.
Eine Theme App Extension ist der pflegbare, wiederverwendbare Pfad. Ein App Block injiziert sichtbare Benutzeroberfläche und muss vom Händler zu einem kompatiblen Produktbereich hinzugefügt werden; ein App Embed kann globales Verhalten laden.
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>
Shoplazza dokumentiert variant.sku; verwenden Sie diese exakte Zeichenkette als ideal.house sku.
Fügen Sie einen App Block hinzu#
Erstellen Sie einen Theme-Extension-App Block für den Produktbereich. Shoplazza-Liquid-Blöcke in einem Produktkontext können auf product zugreifen. Starten Sie mit einem leeren Host und verwenden Sie dann den Produktformular-Status des aktiven Themes, um die ausgewählte Variante bereitzustellen:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Bei einem Produkt mit nur einer Variante kann das JavaScript des Blocks den einzigen dokumentierten Eintrag in product.variants aus den vom Theme sicher serialisierten Daten lesen. Lassen Sie bei mehreren Varianten das Hostelement leer, bis das vorhandene Produktformular des Themes die Auswahl ermittelt hat. So vermeiden Sie die Abhängigkeit von einer undokumentierten Liquid-Eigenschaft für die ausgewählte Variante.
Das SDK laden#
Laden Sie in idealhouse.js das SDK einmal. Bieten Sie für eine wiederverwendbare App Shop ID und Publishable Key über gesäuberte öffentliche Block/Embed-Konfiguration an, anstatt einen einzelnen Händler hart zu codieren:
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);
}
Geben Sie niemals das App-Geheimnis oder ideal.house-Client Secret frei.
Die ausgewählte Variante synchron halten#
Verbinden Sie den dokumentierten Produktformular-Callback des Themes mit diesem Adapter:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Das Variantenobjekt von Shoplazza dokumentiert sku, aber Themes können die Auswahl unterschiedlich umsetzen. Die Anbindung des Callbacks ist kundenseitige Adapterarbeit. Erstellen Sie den Container nach einer neuen Auswahl neu; ändern Sie nicht lediglich das bereits vom SDK befüllte Markup.
Fügen Sie für Kollektionskarten, Schnellansichten, Suchfilter und clientseitig gerenderte Bereiche ein Hostelement pro Artikel hinzu und rufen Sie die Anbindung nach dem dokumentierten Rendering-Callback des Themes auf. Ist auf einer Karte noch keine endgültige Variante bekannt, lassen Sie die Schaltfläche weg oder verlinken Sie auf die Produktseite.
Produkte importieren#
Exportieren Sie jede unterstützte variant.sku und importieren Sie sie als ideal.house sku über Produktimport. Siehe auch Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen sowie Fehler und Wiederholungsversuche.
Admin-API-Exporte, Webhooks, geplante Synchronisation, OAuth sowie Extension-Verteilung sind Kundenumsetzung.
Überprüfung und Entfernen#
Testen Sie die Platzierung des App Block, die Aktivierung des Embed, ein Produkt mit einer Variante, alle Auswahlmöglichkeiten bei mehreren Varianten, leere, doppelte und unbekannte SKUs, Kollektionskarten, Schnellansichten, Filter, Browserverlauf, Mobilgeräte, Lokalisierung/Währung, Einwilligung sowie Vorschau- und Live-Modi des Themes. Prüfen Sie, dass nur eine SDK-Anfrage erfolgt und die Varianten-SKU exakt zugeordnet wird.
Zum Entfernen deaktivieren und deinstallieren Sie die Theme App Extension oder entfernen Sie das benutzerdefinierte Liquid/JavaScript, veröffentlichen Sie das saubere Theme, löschen Sie die Storefront-Caches und vergewissern Sie sich, dass das SDK sowie alle data-idealhouse-*-Knoten fehlen.