Widget boutique en ligne

Événements

Le protocole postMessage entre le widget et votre page — les événements envoyés par le widget, et ce que chacun porte.

Le SDK transforme les événements postMessage du widget en callbacks décrits dans la référence du SDK. Si vous intégrez plutôt un iframe brut, cette page est le protocole que vous implémentez vous-même. En général, utilisez le SDK — il s'en charge pour vous.

Forme du message

Chaque message a un discriminateur source et un type :

{ "source": "scalarcut-embed", "type": "ready" }
  • Le widget envoie des messages avec source: "scalarcut-embed".
  • La page parente envoie des commandes avec source: "scalarcut-embed-parent".

Événements widget → parent

Type Charge utile Signification
ready — Le widget a démarré et écoute les commandes.
bomUpdated objet de devis La nomenclature a changé.
addToCartRequest { lines, layoutFingerprint, layoutToken } L'acheteur a cliqué sur « Ajouter au panier ».
resize { height: number } Le widget demande une nouvelle hauteur de cadre.
error objet d'erreur Le widget a rencontré une erreur qu'il ne pouvait pas résoudre seul.

addToCartRequest

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

La réponse inclut toujours une ligne de carreaux. Quand les consommables au panier sont activés pour la boutique, les lignes de colle, de joint et de primaire sont ajoutées aussi. Ajoutez chaque ligne au panier de votre boutique. Pour savoir comment prix et stock restent la référence dans votre tunnel, voir Intégration du panier.

resize

Le widget signale la hauteur dont il a besoin. Une intégration en iframe brut devrait la respecter pour que le cadre ne défile jamais dans une boîte tronquée :

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

Commandes parent → widget

Le SDK les expose comme méthodes du handle ; le protocole brut est :

Type Données Équivalent 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',
);

Vérifications d'origine

Les deux côtés vérifient l'origine du message avant d'agir. Le SDK le fait déjà ; si vous implémentez le protocole vous-même, comparez event.origin à l'origine d'intégration et ignorez tout ce qui ne correspond pas.