Onlineshop-Widget

Quickstart

SDK laden, Widget mounten und einen Callback verdrahten. Fünfzehn Minuten von einer leeren Produktseite zu einem funktionierenden Layout mit Warenkorb-Sync.

Updated 27 October 2026

Dieser Leitfaden macht aus einer normalen Produktseite einen funktionierenden eingebetteten Planer. Stellen Sie vor dem Start sicher, dass Sie zwei Dinge aus Ihrem Scalarcut-Konto haben: einen Widget-Schlüssel und einen Katalog. Beide werden bei der Anmeldung für Sie erstellt.

1. SDK laden

Fügen Sie das Scalarcut-SDK zu Ihrer Seite hinzu. Es ist ein kleines Skript ohne Abhängigkeiten:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>

2. Container hinzufügen

Reservieren Sie ein Element, in dem der Planer gerendert wird. Das Widget füllt den Container und passt seine Größe an, während der Käufer arbeitet:

<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>

3. Widget mounten

<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
    locale: 'en',
    currency: 'USD',
    onAddToCart(payload) {
      // Add the resolved lines to your own cart.
      payload.lines.forEach((line) => {
        yourStore.addToCart(line.sku, line.qty, line.unit);
      });
    },
  });
</script>

Das ist die gesamte Integration. Das Widget lädt Ihren Katalog, fixiert sich auf die Maße des angezeigten SKUs und liefert die aufgelösten Warenkorbzeilen über onAddToCart.

4. SKU synchron halten

Wenn der Käufer bei geöffneter Seite zu einem anderen Produkt wechselt, teilen Sie es dem Widget mit:

const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');

Das Widget wechselt das Material, behält das Layout des Käufers und berechnet die Mengen neu.

Was als Nächstes passiert

  • Der Käufer beschreibt die Wand oder den Boden, sieht jeden Schnitt und kann Schnittliste und Blueprint öffnen.
  • Wenn er auf In den Warenkorb klickt, erhält Ihr onAddToCart-Callback { lines, layoutFingerprint, layoutToken }, und Ihr Shop fügt die Positionen hinzu.
  • Nichts verlässt Ihren Shop: Preis, Bestand und Checkout bleiben genau dort, wo sie heute sind.

Nächste Schritte