Ereignisse

Das SDK wandelt die postMessage-Ereignisse des Widgets in die Callbacks um, die in der SDK-Referenz beschrieben sind. Wenn Sie stattdessen einen rohen iframe einbetten, ist diese Seite das Protokoll, das Sie selbst implementieren. Verwenden Sie im Allgemeinen das SDK — es übernimmt das für Sie.

Nachrichtenformat

Jede Nachricht hat einen source-Diskriminator und einen type:

{ "source": "scalarcut-embed", "type": "ready" }

• Das Widget sendet Nachrichten mit source: "scalarcut-embed".
• Die Elternseite sendet Befehle mit source: "scalarcut-embed-parent".

Ereignisse Widget → Eltern

Typ	Payload	Bedeutung
ready	—	Das Widget hat gebootet und lauscht auf Befehle.
bomUpdated	Kalkulationsobjekt	Die Materialliste hat sich geändert.
addToCartRequest	{ lines, layoutFingerprint, layoutToken }	Der Käufer hat auf „In den Warenkorb" geklickt.
resize	{ height: number }	Das Widget fordert eine neue Framehöhe an.
error	Fehlerobjekt	Das Widget traf auf einen Fehler, den es nicht selbst lösen konnte.

addToCartRequest

{
  "source": "scalarcut-embed",
  "type": "addToCartRequest",
  "lines": [
    { "sku": "TILE-600-300", "qty": 5, "unit": "box" }
  ],
  "layoutFingerprint": "…",
  "layoutToken": "…"
}

Die Antwort enthält immer eine Fliesenzeile. Wenn Verbrauchsmaterial-in-den-Warenkorb für den Shop aktiviert ist, werden Kleber-, Fugenmörtel- und Grundierungszeilen ebenfalls hinzugefügt. Fügen Sie jede Zeile dem Warenkorb Ihres Shops hinzu. Wie Preis und Bestand in Ihrem Checkout maßgeblich bleiben, siehe Warenkorb-Integration.

resize

Das Widget meldet die benötigte Höhe. Eine Roh-iframe-Integration sollte sie respektieren, damit der Frame nie in einem abgeschnittenen Kasten scrollt:

window.addEventListener('message', (event) => {
  const data = event.data;
  if (data?.source !== 'scalarcut-embed') return;
  if (data.type === 'resize') {
    frame.style.height = `${data.height}px`;
  }
});

Befehle Eltern → Widget

Das SDK stellt diese als Handle-Methoden bereit; das Rohprotokoll ist:

Typ	Daten	SDK-Äquivalent
setSku	{ sku }	handle.setSku(sku)
exportBlueprint	—	handle.exportBlueprint()
requestAddToCart	—	handle.requestAddToCart()

frame.contentWindow.postMessage(
  { source: 'scalarcut-embed-parent', type: 'setSku', sku: 'NEXT_SKU' },
  'https://embed.scalarcut.com',
);

Origin-Prüfungen

Beide Seiten prüfen den Origin der Nachricht, bevor sie handeln. Das SDK erledigt das bereits; wenn Sie das Protokoll selbst implementieren, vergleichen Sie event.origin mit dem Embed-Origin und ignorieren Sie alles, was nicht übereinstimmt.