Widget zum Shop hinzufügen

Das Widget ist ein eigenständiger iframe. Sie können ihn auf zwei Arten zu einer Seite hinzufügen. Das SDK ist der empfohlene Weg, weil es Messaging, Größenanpassung und Warenkorb-Sync für Sie übernimmt.

SDK (empfohlen)

Das SDK kapselt den iframe und das postMessage-Protokoll in eine kleine API:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>
<div id="sc-tiling"></div>
<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
  });
</script>

Das SDK ermittelt den Embed-Host aus der URL des Skripts selbst, daher läuft derselbe Snippet in jedem Shop und jeder Region. Es beobachtet außerdem den Container und hält den Frame auf Desktop und Mobil auf der richtigen Höhe.

Einfacher iframe

Wenn Sie den iframe lieber selbst rendern möchten, verweisen Sie ihn mit Ihren Parametern auf die Widget-URL:

<iframe
  src="https://embed.scalarcut.com/v1/tiling?wk=YOUR_WIDGET_KEY&catalog=YOUR_CATALOG_SLUG&sku=CURRENT_PRODUCT_SKU&locale=en"
  style="width: 100%; height: 880px; border: 0;"
  title="Tile layout"
  allow="fullscreen"
  allowfullscreen
></iframe>

Für den Warenkorb-Sync ist das SDK trotzdem die bessere Wahl, denn bei einem rohen iframe lauschen Sie selbst auf die postMessage-Ereignisse des Widgets. Siehe Ereignisse.

Größe

Das Widget füllt die Breite seines Containers und verwaltet seine Höhe selbst.

• Desktop — das SDK startet mit 880 px Höhe und wächst automatisch, wenn die Oberfläche mehr Platz braucht.
• Mobil — das Widget nutzt die volle Viewport-Höhe, damit Leinwand und Kalkulationspanel auf dem Handy bequem bleiben.

Wenn Sie einen kürzeren Startframe möchten, setzen Sie height:

ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  catalog: 'YOUR_CATALOG_SLUG',
  height: 720,
});

Platzierung

Setzen Sie das Widget auf die Produktseite, unter oder neben die Galerie. Es ist an einen einzelnen SKU gebunden und gehört dorthin, wo der Käufer bereits ein Produkt gewählt hat — Fliese, Laminat, LVT, Platte oder Mehrschichtparkett.

• Ein SKU pro Mount. Zeigt die Seite Varianten, übergeben Sie den SKU der gewählten Variante und rufen Sie setSku bei Änderung auf.
• Es lädt lazy. Das SDK setzt loading="lazy" auf den Frame, damit die Seite schnell bleibt, wenn das Widget unterhalb des Folds liegt.
• Ein Widget pro Seite reicht. Dieselbe Instanz behandelt Wände und Böden.

HTTPS

Das Widget wird über HTTPS ausgeliefert und benötigt in Produktion eine HTTPS-Elternseite. Ihr Widget-Schlüssel ist an die von Ihnen registrierten Origins gebunden und lädt daher nur auf Ihren Domains — mehr dazu in Sicherheit & Lizenzierung.