Widget negozio online

Guida rapida

Carica l'SDK, monta il widget e collega un callback. Quindici minuti da una pagina prodotto vuota a una disposizione funzionante con sincronizzazione del carrello.

Updated 27 October 2026

Questa guida trasforma una semplice pagina prodotto in un pianificatore incorporato funzionante. Prima di iniziare, assicurati di avere due cose dal tuo account Scalarcut: una chiave widget e un catalogo. Entrambe vengono create alla registrazione.

1. Carica l'SDK

Aggiungi l'SDK Scalarcut alla tua pagina. È un piccolo script senza dipendenze:

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

2. Aggiungi un contenitore

Riserva un elemento in cui verrà renderizzato il pianificatore. Il widget riempie il contenitore e si ridimensiona mentre l'acquirente lavora:

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

3. Monta il widget

<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>

È tutta l'integrazione. Il widget carica il tuo catalogo, si blocca sulle dimensioni dello SKU visualizzato e restituisce le righe carrello risolte tramite onAddToCart.

4. Mantieni lo SKU sincronizzato

Se l'acquirente passa a un altro prodotto mentre la pagina è aperta, avvisa il widget:

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

Il widget cambia il materiale, conserva la disposizione dell'acquirente e ricalcola le quantità.

Cosa succede dopo

  • L'acquirente descrive la parete o il pavimento, vede ogni taglio e può aprire la lista tagli e il blueprint.
  • Quando clicca su Aggiungi al carrello, il tuo callback onAddToCart riceve { lines, layoutFingerprint, layoutToken }, e il tuo negozio aggiunge gli articoli.
  • Nulla esce dal tuo negozio: prezzo, stock e checkout restano esattamente dove sono oggi.

Passi successivi