Widget de tienda online
Integración del carrito
Cómo convierte el widget una distribución en líneas de carrito y por qué el precio, el stock y el checkout siguen siendo autoritativos en tu plataforma.
El widget convierte una distribución terminada en líneas de carrito concretas y se las entrega a tu tienda. Tu tienda sigue siendo responsable de precios, descuentos, stock y checkout.
Carga útil del callback
Cuando el comprador pulsa Añadir al carrito, el widget llama a onAddToCart con:
{
lines: [
{ sku: 'TILE-600-300', qty: 5, unit: 'box' },
],
layoutFingerprint: '…',
layoutToken: '…',
}
lines son los artículos a añadir. Cada línea es un SKU del catálogo, una cantidad numérica y una unidad. La respuesta siempre incluye una línea de azulejos — el total de azulejos a comprar, expresado en cajas.
Los consumibles son opcionales
El adhesivo, la lechada y la imprimación siempre se calculan y se muestran en el presupuesto en pantalla y en el Blueprint PDF. Si además se sincronizan al carrito es una opción que se activa para los comercios que venden esos artículos. Cuando está activada, esas líneas se añaden junto al azulejo:
{
lines: [
{ sku: 'TILE-600-300', qty: 5, unit: 'box' },
{ sku: 'ADHESIVE-25', qty: 12.5, unit: 'kg' },
{ sku: 'GROUT-2KG', qty: 3, unit: 'kg' },
{ sku: 'PRIMER-10L', qty: 1, unit: 'l' },
],
layoutFingerprint: '…',
layoutToken: '…',
}
Háblanos si vendes consumibles y quieres incluirlos — lo activamos para tu tienda durante la puesta en marcha.
layoutFingerprint es un identificador estable de la distribución. layoutToken es un token firmado que puedes guardar para reabrir más tarde la distribución exacta — por ejemplo, para adjuntar el plan a un pedido.
Añadir a tu carrito
Tu callback añade las líneas usando la propia API de tu tienda:
onAddToCart(payload) {
payload.lines.forEach((line) => {
yourStore.addToCart({
sku: line.sku,
quantity: line.qty,
unit: line.unit,
});
});
}
Para WooCommerce eso significa una llamada cart/add-item por línea; para Shopify, una mutación de carrito; para una tienda a medida, tu propio servicio de carrito. El widget nunca llama a tu tienda directamente — lo haces tú, con los SKU y cantidades que resolvió.
El precio se queda en tu tienda
El widget nunca envía un precio. Puede mostrar precios de lista de tu catálogo en el presupuesto a modo de contexto, pero el precio final, impuestos, promociones y descuentos de fidelización los aplica tu checkout al añadir las líneas. Eso mantiene un único motor de precios y evita cualquier desajuste entre el widget y el carrito.
El stock se queda en tu tienda
El widget añade lo que exige la distribución. Tu tienda valida el stock de esos SKU exactamente igual que en cualquier otro añadir al carrito. Si un SKU está bajo o no disponible, tu flujo existente de pedidos pendientes y notificaciones se aplica sin cambios.
Endpoint de intención de carrito
Para integraciones headless o del lado del servidor hay un endpoint de intención de carrito que devuelve las mismas líneas resueltas. Tu servidor lo llama con la distribución y añade el resultado al carrito de sesión:
curl -X POST "https://embed.scalarcut.com/v1/tiling/cart-intent" \
-H "Authorization: Bearer $WIDGET_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"catalog": "YOUR_CATALOG_SLUG",
"sku": "TILE-600-300",
"layoutFingerprint": "…",
"quantities": { "boxes": 5 }
}'
Respuesta:
{
"lines": [
{ "sku": "TILE-600-300", "qty": 5, "unit": "box" }
],
"layoutFingerprint": "…",
"layoutToken": "…"
}
Con los consumibles activados en tu tienda, la petición puede llevar también adhesiveKg, groutKg y primerL, y la respuesta gana las líneas correspondientes.
Mira la referencia de la API para el contrato completo del endpoint.