Ideal House
Zum Hauptinhalt springen

SHOPLINE-Integration#

Integrieren Sie Room Visualizer mit einem SHOPLINE Online Store über eine Theme App Extension oder einen kontrollierten Custom-Theme-Block.

Überprüfungsstatus: SHOPLINE Online Store 2.x/3.0-Themendokumentation geprüft am 7. September 2026. Keine Partner-App oder Händler-Testshop war verfügbar. Die Template-Syntax und unterstützten Erweiterungstypen variieren je nach Online-Store-Generation, daher ist gegen die exakte Shop-Version zu validieren.

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.

Wählen Sie eine Integrationsoberfläche#

  • Für eine wiederverwendbare Public App auf Online Store 2.0/2.1 empfiehlt SHOPLINE eine Theme App Extension mit einem App Block sowie optionalem App Embed Block.
  • Online Store 3.0-Themes bieten wiederverwendbare Blöcke mit optionalen JavaScript-Assets und App Blocks.
  • Script Tag/Asset APIs sind veraltet oder versions-/apptypabhängig; wählen Sie diese nicht, ohne die Kompatibilitätstabelle von SHOPLINE zu prüfen.
  • Verwenden Sie für eine Theme-Anpassung für einen einzelnen Shop die Block-/Template- und Assetstruktur der aktiven Version.

Bereiten Sie einen Entwicklungs-Shop, Extension/Theme-Zugriff, Shop ID, Publishable Key sowie importierte Variantencodes vor.

Minimale SDK-Schnittstelle#

html
<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 Product Code muss mit dem ideal.house-Katalogwert sku übereinstimmen. Diese Dokumentation behauptet nicht, dass eine installierbare ideal.house-App für SHOPLINE existiert.

Erstellen Sie den Theme-Block#

Erstellen Sie einen App Block oder einen öffentlichen Theme-Block, der auf Produktdetailseiten ein Hostelement rendert. Verwenden Sie das genaue Produkt-/Variantenobjekt und die für Ihre Online Store-Generation dokumentierten Hilfsfunktionen zum Maskieren. Das endgültige HTML des Onlineshops muss wie folgt aussehen:

html
<div class="idealhouse-host">
  <div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>

Ersetzen Sie im Vorlagenquellcode CHAIR-OAK-01 durch den Ausdruck für die SKU beziehungsweise den Code der aktuell ausgewählten Variante. Fügen Sie keinen Shopify-Liquid-Ausdruck in SHOPLINE-3.0-Handlebars-Vorlagen ein; die Sprachen und Objektschnittstellen unterscheiden sich.

Fügen Sie für einen App Block ihn im Theme Editor zum Produktbereich hinzu. Für ein App Embed verwenden Sie dieses, um das SDK global ohne sichtbare UI zu laden. App Blocks erfordern normalerweise, dass der Händler sie nach der Installation aktiviert/platziert.

Laden Sie das SDK einmalig#

Erstellen Sie im Extension/Theme-JavaScript-Asset das Skript mit den beiden öffentlichen Einstellungen, bevor Sie es anhängen:

js
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);
}

Verwenden Sie Extension-Konfiguration/dynamische Parameter für Multi-Händler-Anmeldeinformationen. Geben Sie nur den Publishable Key frei; bewahren Sie App-Geheimnisse auf Ihrem Server auf.

Ausgewählte Varianten und dynamische Bereiche#

Verbinden Sie den dokumentierten Produkt-Auswahl-Callback des aktiven Themes mit einem Kundenadapter:

js
function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

SHOPLINE-Themes sind anpassbar, daher erfindet diese Anleitung kein universelles Storefront-Varianten-Event. Online Store 3.0 dokumentiert Theme-Editor-Sektion-/Block-Events, aber dies sind Editor-Lebenszyklus-Events, keine Käufer-Variantenauswahl-Events.

Erstellen Sie einen neuen Container, wenn Abschnitte, Filter, Seitennavigation, Schnellansichten oder die Vorschau des Theme-Editors einen Produktknoten neu rendern. Entfernen Sie Listener, wenn ein Block im Theme Editor entladen wird. Schaltflächen auf Produktkarten benötigen die SKU des jeweiligen Artikels; lassen Sie die Steuerung weg, wenn die endgültige Variante noch nicht bekannt ist.

Produkte importieren#

Exportieren Sie die SHOPLINE Produkt- und Variantendaten und ordnen Sie den ausgewählten Storefront-Code ideal.house sku zu. Verwenden Sie Produktimport sowie die genehmigten Anleitungen für Import, Auftragsstatus, Auflisten, Aktualisierungen, Löschen und Behandlung von Wiederholungsversuchen.

SHOPLINE Admin-API-Synchronisation, Webhooks, App-OAuth sowie App-Store-Verteilung sind Kundenadapterarbeit.

Überprüfung und Entfernen#

Testen Sie Installation und Händler-Blockaktivierung, ein einfaches Produkt, jede Variante, fehlende/unbekannte Codes, Karten, Schnellansicht, Filter, SPA-artige Navigation, Mobilgeräte, Zustimmung, Theme-Editor-Vorschau sowie jede unterstützte Online Store Version. Bestätigen Sie eine einzelne SDK-Anfrage sowie exakte Code/SKU-Zuordnung.

Zum Entfernen deaktivieren Sie den App Block/Embed und deinstallieren Sie die Extension, oder entfernen Sie den Custom-Block sowie das Asset. Veröffentlichen Sie das saubere Theme, löschen Sie die Caches und vergewissern Sie sich, dass kein SDK-URL oder data-idealhouse-*-Markup verbleibt.

Offizielle Plattformreferenzen#