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.