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.