Widget de tienda online

Inicio rápido

Carga el SDK, monta el widget y conecta un callback. Quince minutos de una página de producto en blanco a una distribución funcionando con sincronización de carrito.

Updated 27 October 2026

Esta guía convierte una página de producto normal en un planificador integrado en funcionamiento. Antes de empezar, asegúrate de tener dos cosas de tu cuenta de Scalarcut: una clave de widget y un catálogo. Ambas se crean al registrarte.

1. Carga el SDK

Añade el SDK de Scalarcut a tu página. Es un script pequeño y sin dependencias:

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

2. Añade un contenedor

Reserva un elemento donde se renderizará el planificador. El widget llena el contenedor y se redimensiona mientras el comprador trabaja:

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

3. Monta el 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>

Esa es toda la integración. El widget carga tu catálogo, se fija a las medidas del SKU que se está viendo y devuelve las líneas de carrito resueltas mediante onAddToCart.

4. Mantén el SKU sincronizado

Si el comprador cambia a otro producto con la página abierta, avísale al widget:

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

El widget cambia el material, conserva la distribución del comprador y recalcula las cantidades.

Qué pasa después

  • El comprador describe la pared o el suelo, ve cada corte y puede abrir la lista de cortes y el blueprint.
  • Cuando pulsa Añadir al carrito, tu callback onAddToCart recibe { lines, layoutFingerprint, layoutToken }, y tu tienda añade los artículos.
  • Nada sale de tu tienda: precio, stock y checkout siguen exactamente donde están hoy.

Siguientes pasos