Widget de tienda online

Referencia del SDK

La API completa de ScalarcutTiling.mount: cada opción, cada callback y cada método del handle que devuelve.

El SDK tiene un único punto de entrada, ScalarcutTiling.mount(target, options). Devuelve un handle que puedes usar para controlar el widget después de que cargue.

mount(target, options)

const planner = ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  // ... options below
});

target es una cadena de selector CSS o un Element. El widget se renderiza en un iframe nuevo dentro de él.

Opciones

Opción Tipo Obligatoria Descripción
widgetKey string Sí La clave de widget de tu cuenta.
catalog string No Slug del catálogo al que se fija el planificador.
sku string No SKU a preseleccionar al cargar.
locale string No Locale de la interfaz — en, ru, de, pl, it, es, fr o pt.
currency string No Código de moneda mostrada, por ejemplo USD, EUR o BYN.
height number No Altura inicial del frame de escritorio en píxeles. Por defecto 880.
embedOrigin string No Origen del host de integración. Por defecto, el propio origen del script del SDK, así que rara vez necesitas definirlo.
onReady () => void No Se llama cuando el widget ha terminado de arrancar.
onBomUpdated (payload) => void No Se llama cada vez que cambia la lista de materiales.
onAddToCart (payload) => void No Se llama cuando el comprador pulsa «Añadir al carrito».
onError (payload) => void No Se llama cuando el widget informa de un error.
onResize (height) => void No Se llama cuando el widget pide una nueva altura.

Callbacks

onAddToCart(payload) es el que más usarás:

onAddToCart(payload) {
  // payload = { lines: [{ sku, qty, unit }], layoutFingerprint, layoutToken }
  payload.lines.forEach((line) => {
    yourStore.addToCart(line.sku, line.qty, line.unit);
  });
}

Cada línea lleva un SKU, una cantidad numérica y una unidad (box para azulejos; kg y l para consumibles cuando esa opción está activada en tu tienda). Mira Integración del carrito.

onBomUpdated(payload) te da una instantánea en vivo del presupuesto, para que tu página pueda mostrar algo como «Azulejos a pedir: 34» junto al widget:

onBomUpdated(payload) {
  console.log(payload); // areas, piece counts, boxes, consumables
}

onError(payload) lleva un motivo legible por máquina que puedes pasar a tu equipo de soporte.

Métodos del handle

mount devuelve un handle:

Método Descripción
setSku(sku) Cambia el SKU activo sin volver a renderizar todo el widget.
setLocale(locale) Cambia el idioma de la interfaz y recarga el frame.
setCurrency(currency) Cambia la moneda mostrada y recarga el frame.
exportBlueprint() Pide al widget que descargue el Blueprint PDF actual.
requestAddToCart() Dispara «Añadir al carrito» por programa, igual que el botón dentro del widget.
destroy() Elimina el iframe y cancela la suscripción del listener. Llámalo cuando el widget ya no haga falta, por ejemplo al navegar en una SPA.
const planner = ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });

// Later, in response to a variant switch on your page:
planner.setSku('VARIANT_SKU');

// On navigation away:
planner.destroy();

Locale y moneda recargan, el SKU no

setLocale y setCurrency cambian el idioma y la moneda del widget y recargan el frame. setSku no recarga — cambia el material en su sitio y conserva la distribución del comprador.

Errores

mount lanza inmediatamente si falta el destino, no hay widgetKey o no se puede determinar el origen de integración. Envuelve la llamada si tu página renderiza el contenedor de forma condicional:

try {
  ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
} catch (error) {
  console.warn('Scalarcut not mounted:', error.message);
}