Widget de tienda online
Eventos
El protocolo postMessage entre el widget y tu página — los eventos que envía el widget y lo que lleva cada uno.
El SDK convierte los eventos postMessage del widget en los callbacks descritos en la referencia del SDK. Si en su lugar integras un iframe crudo, esta página es el protocolo que implementas tú mismo. En general, usa el SDK — se encarga por ti.
Forma del mensaje
Cada mensaje tiene un discriminador source y un type:
{ "source": "scalarcut-embed", "type": "ready" }
- El widget envía mensajes con
source: "scalarcut-embed". - La página padre envía comandos con
source: "scalarcut-embed-parent".
Eventos widget → padre
| Tipo | Carga útil | Significado |
|---|---|---|
ready |
— | El widget ha arrancado y escucha comandos. |
bomUpdated |
objeto de presupuesto | La lista de materiales cambió. |
addToCartRequest |
{ lines, layoutFingerprint, layoutToken } |
El comprador pulsó «Añadir al carrito». |
resize |
{ height: number } |
El widget pide una nueva altura de frame. |
error |
objeto de error | El widget encontró un error que no pudo resolver por sí mismo. |
addToCartRequest
{
"source": "scalarcut-embed",
"type": "addToCartRequest",
"lines": [
{ "sku": "TILE-600-300", "qty": 5, "unit": "box" }
],
"layoutFingerprint": "…",
"layoutToken": "…"
}
La respuesta siempre incluye una línea de azulejos. Cuando los consumibles al carrito están activados en la tienda, se añaden también las líneas de adhesivo, lechada e imprimación. Añade cada línea al carrito de tu tienda. Sobre cómo el precio y el stock siguen siendo autoritativos en tu checkout, mira Integración del carrito.
resize
El widget informa de la altura que necesita. Una integración con iframe crudo debería respetarla para que el frame nunca haga scroll dentro de una caja recortada:
window.addEventListener('message', (event) => {
const data = event.data;
if (data?.source !== 'scalarcut-embed') return;
if (data.type === 'resize') {
frame.style.height = `${data.height}px`;
}
});
Comandos padre → widget
El SDK los expone como métodos del handle; el protocolo crudo es:
| Tipo | Datos | Equivalente del SDK |
|---|---|---|
setSku |
{ sku } |
handle.setSku(sku) |
exportBlueprint |
— | handle.exportBlueprint() |
requestAddToCart |
— | handle.requestAddToCart() |
frame.contentWindow.postMessage(
{ source: 'scalarcut-embed-parent', type: 'setSku', sku: 'NEXT_SKU' },
'https://embed.scalarcut.com',
);
Comprobaciones de origen
Ambas partes comprueban el origen del mensaje antes de actuar. El SDK ya lo hace; si implementas el protocolo tú mismo, compara event.origin con el origen de integración e ignora lo que no coincida.