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.