Onlineshop-Widget

Warenkorb-Integration

Wie das Widget ein Layout in Warenkorbzeilen verwandelt und warum Preis, Bestand und Checkout auf Ihrer Plattform maßgeblich bleiben.

Das Widget verwandelt ein fertiges Layout in konkrete Warenkorbzeilen und übergibt sie Ihrem Shop. Ihr Shop bleibt für Preise, Rabatte, Bestand und Checkout verantwortlich.

Callback-Payload

Wenn der Käufer auf In den Warenkorb klickt, ruft das Widget onAddToCart auf mit:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

lines sind die hinzuzufügenden Positionen. Jede Zeile ist ein Katalog-SKU, eine numerische Menge und eine Einheit. Die Antwort enthält immer eine Fliesenzeile — die gesamten zu kaufenden Fliesen, ausgedrückt in Kartons.

Verbrauchsmaterial ist opt-in

Kleber, Fugenmörtel und Grundierung werden immer berechnet und in der Bildschirmkalkulation sowie im Blueprint-PDF angezeigt. Ob sie auch in den Warenkorb synchronisiert werden, ist eine Opt-in-Einstellung, die für Händler aktiviert wird, die diese Artikel führen. Ist sie aktiviert, werden diese Zeilen neben der Fliese hinzugefügt:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
    { sku: 'ADHESIVE-25', qty: 12.5, unit: 'kg' },
    { sku: 'GROUT-2KG', qty: 3, unit: 'kg' },
    { sku: 'PRIMER-10L', qty: 1, unit: 'l' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

Sprechen Sie uns an, wenn Sie Verbrauchsmaterial verkaufen und es einbeziehen möchten — wir aktivieren es während der Einrichtung für Ihren Shop.

layoutFingerprint ist ein stabiler Bezeichner für das Layout. layoutToken ist ein signiertes Token, das Sie speichern können, damit das exakte Layout später wieder geöffnet werden kann — etwa um den Plan einer Bestellung beizufügen.

Hinzufügen zu Ihrem Warenkorb

Ihr Callback fügt die Zeilen über die eigene API Ihres Shops hinzu:

onAddToCart(payload) {
  payload.lines.forEach((line) => {
    yourStore.addToCart({
      sku: line.sku,
      quantity: line.qty,
      unit: line.unit,
    });
  });
}

Für WooCommerce bedeutet das einen cart/add-item-Aufruf pro Zeile; für Shopify eine Warenkorb-Mutation; für einen individuellen Shop Ihren eigenen Warenkorbdienst. Das Widget ruft Ihren Shop nie direkt auf — das tun Sie, mit den SKUs und Mengen, die es aufgelöst hat.

Preis bleibt in Ihrem Shop

Das Widget sendet nie einen Preis. Es kann Listenpreise aus Ihrem Katalog zur Orientierung in der Kalkulation anzeigen, aber Endpreis, Steuer, Aktionen und Treuerabatte werden alle von Ihrem Checkout angewendet, wenn die Zeilen hinzugefügt werden. Das erhält eine einzige Preis-Engine und vermeidet jede Abweichung zwischen Widget und Warenkorb.

Bestand bleibt in Ihrem Shop

Das Widget fügt hinzu, was das Layout erfordert. Ihr Shop validiert den Bestand dieser SKUs genau wie bei jedem anderen Hinzufügen zum Warenkorb. Ist ein SKU niedrig oder nicht verfügbar, greift Ihr bestehender Nachbestell- und Benachrichtigungsfluss unverändert.

Cart-Intent-Endpunkt

Für Headless- oder serverseitige Integrationen gibt es einen Cart-Intent-Endpunkt, der dieselben aufgelösten Zeilen zurückgibt. Ihr Server ruft ihn mit dem Layout auf und fügt das Ergebnis dem Session-Warenkorb hinzu:

curl -X POST "https://embed.scalarcut.com/v1/tiling/cart-intent" \
  -H "Authorization: Bearer $WIDGET_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "catalog": "YOUR_CATALOG_SLUG",
    "sku": "TILE-600-300",
    "layoutFingerprint": "…",
    "quantities": { "boxes": 5 }
  }'

Antwort:

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

Ist Verbrauchsmaterial für Ihren Shop aktiviert, kann die Anfrage auch adhesiveKg, groutKg und primerL tragen, und die Antwort erhält die entsprechenden Zeilen.

Den vollständigen Endpunkt-Vertrag finden Sie in der API-Referenz.