Widget sklepu internetowego
Zdarzenia
Protokół postMessage między widżetem a Twoją stroną — zdarzenia wysyłane przez widżet i co niesie każde z nich.
SDK zamienia zdarzenia postMessage widżetu na callbacki opisane w referencji SDK. Jeśli zamiast tego osadzasz surowy iframe, ta strona to protokół, który implementujesz samodzielnie. Ogólnie rzecz biorąc, używaj SDK — zrobi to za Ciebie.
Kształt wiadomości
Każda wiadomość ma dyskryminator source i type:
{ "source": "scalarcut-embed", "type": "ready" }
- Widżet wysyła wiadomości z
source: "scalarcut-embed". - Strona nadrzędna wysyła polecenia z
source: "scalarcut-embed-parent".
Zdarzenia widżet → nadrzędny
| Typ | Ładunek | Znaczenie |
|---|---|---|
ready |
— | Widżet wystartował i nasłuchuje poleceń. |
bomUpdated |
obiekt wyceny | Zmieniło się zestawienie materiałów. |
addToCartRequest |
{ lines, layoutFingerprint, layoutToken } |
Kupujący kliknął „Dodaj do koszyka". |
resize |
{ height: number } |
Widżet prosi o nową wysokość ramki. |
error |
obiekt błędu | Widżet napotkał błąd, którego nie mógł sam rozwiązać. |
addToCartRequest
{
"source": "scalarcut-embed",
"type": "addToCartRequest",
"lines": [
{ "sku": "TILE-600-300", "qty": 5, "unit": "box" }
],
"layoutFingerprint": "…",
"layoutToken": "…"
}
Odpowiedź zawsze zawiera pozycję płytek. Gdy materiały eksploatacyjne do koszyka są włączone dla sklepu, dodawane są też pozycje kleju, fugi i gruntu. Dodaj każdą pozycję do koszyka swojego sklepu. O tym, jak cena i stan magazynowy pozostają autorytatywne w Twoim checkoucie, zobacz Integracja koszyka.
resize
Widżet zgłasza wysokość, której potrzebuje. Integracja z surowym iframe powinna ją respektować, aby ramka nigdy nie przewijała się w przyciętym polu:
window.addEventListener('message', (event) => {
const data = event.data;
if (data?.source !== 'scalarcut-embed') return;
if (data.type === 'resize') {
frame.style.height = `${data.height}px`;
}
});
Polecenia nadrzędny → widżet
SDK udostępnia je jako metody uchwytu; surowy protokół to:
| Typ | Dane | Odpowiednik 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',
);
Sprawdzanie originów
Obie strony sprawdzają origin wiadomości przed działaniem. SDK robi to już samo; jeśli implementujesz protokół samodzielnie, porównaj event.origin z originem osadzenia i ignoruj wszystko, co nie pasuje.