SDK-Referenz

Das SDK hat einen einzigen Einstiegspunkt, ScalarcutTiling.mount(target, options). Es gibt ein Handle zurück, mit dem Sie das Widget nach dem Laden steuern.

mount(target, options)

const planner = ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  // ... options below
});

target ist eine CSS-Selektor-Zeichenkette oder ein Element. Das Widget rendert in einen neuen iframe darin.

Optionen

Option	Typ	Pflicht	Beschreibung
widgetKey	string	Ja	Der Widget-Schlüssel Ihres Kontos.
catalog	string	Nein	Katalog-Slug, auf den der Planer fixiert wird.
sku	string	Nein	SKU, der beim Laden vorausgewählt wird.
locale	string	Nein	UI-Locale — en, ru, de, pl, it, es, fr oder pt.
currency	string	Nein	Anzeige-Währungscode, z. B. USD, EUR oder BYN.
height	number	Nein	Start-Desktop-Framehöhe in Pixeln. Standard 880.
embedOrigin	string	Nein	Origin des Embed-Hosts. Standard ist der Origin des SDK-Skripts selbst, daher müssen Sie dies selten setzen.
onReady	() => void	Nein	Wird aufgerufen, wenn das Widget fertig gebootet hat.
onBomUpdated	(payload) => void	Nein	Wird bei jeder Änderung der Materialliste aufgerufen.
onAddToCart	(payload) => void	Nein	Wird aufgerufen, wenn der Käufer auf „In den Warenkorb" klickt.
onError	(payload) => void	Nein	Wird aufgerufen, wenn das Widget einen Fehler meldet.
onResize	(height) => void	Nein	Wird aufgerufen, wenn das Widget eine neue Höhe anfordert.

Callbacks

onAddToCart(payload) ist der, den Sie am häufigsten verwenden:

onAddToCart(payload) {
  // payload = { lines: [{ sku, qty, unit }], layoutFingerprint, layoutToken }
  payload.lines.forEach((line) => {
    yourStore.addToCart(line.sku, line.qty, line.unit);
  });
}

Jede Zeile trägt einen SKU, eine numerische Menge und eine Einheit (box für Fliesen; kg und l für Verbrauchsmaterial, wenn diese Option für Ihren Shop aktiviert ist). Siehe Warenkorb-Integration.

onBomUpdated(payload) liefert einen Live-Schnappschuss der Kalkulation, damit Ihre Seite neben dem Widget so etwas wie „Zu bestellende Fliesen: 34" anzeigen kann:

onBomUpdated(payload) {
  console.log(payload); // areas, piece counts, boxes, consumables
}

onError(payload) trägt eine maschinenlesbare Ursache, die Sie an Ihr Support-Team weiterreichen können.

Handle-Methoden

mount gibt ein Handle zurück:

Methode	Beschreibung
setSku(sku)	Wechselt den aktiven SKU, ohne das ganze Widget neu zu rendern.
setLocale(locale)	Wechselt die UI-Sprache und lädt den Frame neu.
setCurrency(currency)	Wechselt die Anzeige-Währung und lädt den Frame neu.
exportBlueprint()	Fordert das Widget auf, das aktuelle Blueprint-PDF herunterzuladen.
requestAddToCart()	Löst „In den Warenkorb" programmatisch aus, wie die Schaltfläche im Widget.
destroy()	Entfernt den iframe und meldet den Listener ab. Rufen Sie es auf, wenn das Widget nicht mehr gebraucht wird, z. B. bei Single-Page-Navigation.

const planner = ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });

// Later, in response to a variant switch on your page:
planner.setSku('VARIANT_SKU');

// On navigation away:
planner.destroy();

Locale und Währung laden neu, SKU nicht

setLocale und setCurrency ändern Sprache und Währung des Widgets und laden den Frame neu. setSku lädt nicht neu — es tauscht das Material an Ort und Stelle und behält das Layout des Käufers.

Fehler

mount wirft sofort, wenn das Ziel fehlt, widgetKey nicht gesetzt ist oder der Embed-Origin nicht bestimmt werden kann. Umschließen Sie den Aufruf, wenn Ihre Seite den Container bedingt rendert:

try {
  ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
} catch (error) {
  console.warn('Scalarcut not mounted:', error.message);
}