Widget de loja online
Eventos
O protocolo postMessage entre o widget e a sua página — os eventos que o widget envia e o que cada um transporta.
O SDK transforma os eventos postMessage do widget nos callbacks descritos na referência do SDK. Se em vez disso incorporar um iframe simples, esta página é o protocolo que implementa por si. Em geral, use o SDK — ele trata disto por si.
Forma da mensagem
Cada mensagem tem um discriminador source e um type:
{ "source": "scalarcut-embed", "type": "ready" }
- O widget envia mensagens com
source: "scalarcut-embed". - A página mãe envia comandos com
source: "scalarcut-embed-parent".
Eventos widget → mãe
| Tipo | Carga útil | Significado |
|---|---|---|
ready |
— | O widget arrancou e está à escuta de comandos. |
bomUpdated |
objeto de orçamento | A lista de materiais mudou. |
addToCartRequest |
{ lines, layoutFingerprint, layoutToken } |
O comprador clicou em «Adicionar ao carrinho». |
resize |
{ height: number } |
O widget pede uma nova altura de frame. |
error |
objeto de erro | O widget encontrou um erro que não conseguiu resolver sozinho. |
addToCartRequest
{
"source": "scalarcut-embed",
"type": "addToCartRequest",
"lines": [
{ "sku": "TILE-600-300", "qty": 5, "unit": "box" }
],
"layoutFingerprint": "…",
"layoutToken": "…"
}
A resposta inclui sempre uma linha de azulejos. Quando os consumíveis para o carrinho estão ativados na loja, também são adicionadas as linhas de cola, betume e primário. Adicione cada linha ao carrinho da sua loja. Sobre como preço e stock continuam a ser a autoridade no seu checkout, veja Integração do carrinho.
resize
O widget reporta a altura de que precisa. Uma integração com iframe simples deve respeitá-la para que o frame nunca faça scroll dentro de uma caixa cortada:
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 mãe → widget
O SDK expõe-nos como métodos do handle; o protocolo simples é:
| Tipo | Dados | Equivalente 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',
);
Verificações de origem
Ambos os lados verificam a origem da mensagem antes de agir. O SDK já o faz; se implementar o protocolo por si, compare event.origin com a origem de incorporação e ignore tudo o que não corresponder.