Widget negozio online

Eventi

Il protocollo postMessage tra il widget e la tua pagina — gli eventi inviati dal widget e cosa porta ciascuno.

L'SDK trasforma gli eventi postMessage del widget nei callback descritti nel riferimento SDK. Se invece incorpori un iframe grezzo, questa pagina è il protocollo che implementi da solo. In generale usa l'SDK — se ne occupa lui per te.

Forma del messaggio

Ogni messaggio ha un discriminatore source e un type:

{ "source": "scalarcut-embed", "type": "ready" }
  • Il widget invia messaggi con source: "scalarcut-embed".
  • La pagina madre invia comandi con source: "scalarcut-embed-parent".

Eventi widget → madre

Tipo Payload Significato
ready — Il widget si è avviato e ascolta i comandi.
bomUpdated oggetto preventivo La distinta materiali è cambiata.
addToCartRequest { lines, layoutFingerprint, layoutToken } L'acquirente ha cliccato su «Aggiungi al carrello».
resize { height: number } Il widget richiede una nuova altezza del frame.
error oggetto errore Il widget ha incontrato un errore che non poteva risolvere da solo.

addToCartRequest

{
  "source": "scalarcut-embed",
  "type": "addToCartRequest",
  "lines": [
    { "sku": "TILE-600-300", "qty": 5, "unit": "box" }
  ],
  "layoutFingerprint": "…",
  "layoutToken": "…"
}

La risposta include sempre una riga di piastrelle. Quando i materiali di consumo nel carrello sono abilitati per il negozio, si aggiungono anche le righe di colla, stucco e primer. Aggiungi ogni riga al carrello del tuo negozio. Su come prezzo e stock restino autorevoli nel tuo checkout, vedi Integrazione del carrello.

resize

Il widget segnala l'altezza di cui ha bisogno. Un'integrazione con iframe grezzo dovrebbe rispettarla, così il frame non scorre mai dentro una scatola ritagliata:

window.addEventListener('message', (event) => {
  const data = event.data;
  if (data?.source !== 'scalarcut-embed') return;
  if (data.type === 'resize') {
    frame.style.height = `${data.height}px`;
  }
});

Comandi madre → widget

L'SDK li espone come metodi dell'handle; il protocollo grezzo è:

Tipo Dati 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',
);

Controlli di origine

Entrambi i lati verificano l'origine del messaggio prima di agire. L'SDK lo fa già; se implementi il protocollo da solo, confronta event.origin con l'origine di incorporamento e ignora tutto ciò che non corrisponde.