Виджет интернет-магазина

События

Протокол postMessage между виджетом и вашей страницей — события, которые отправляет виджет, и что несёт каждое из них.

SDK превращает события postMessage виджета в колбэки, описанные в справочнике SDK. Если вместо SDK вы встраиваете простой iframe, эта страница — протокол, который вы реализуете сами. В целом пользуйтесь SDK — он делает это за вас.

Формат сообщения

Каждое сообщение имеет дискриминатор source и type:

{ "source": "scalarcut-embed", "type": "ready" }
  • Виджет отправляет сообщения с source: "scalarcut-embed".
  • Родительская страница отправляет команды с source: "scalarcut-embed-parent".

События виджета → родителя

Тип Полезная нагрузка Смысл
ready — Виджет загрузился и слушает команды.
bomUpdated объект сметы Ведомость материалов изменилась.
addToCartRequest { lines, layoutFingerprint, layoutToken } Покупатель нажал «Добавить в корзину».
resize { height: number } Виджет просит новую высоту фрейма.
error объект ошибки Виджет столкнулся с ошибкой, которую не смог решить сам.

addToCartRequest

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

Ответ всегда содержит строку плитки. Когда для магазина включены расходники в корзину, добавляются строки клея, затирки и грунтовки. Добавьте каждую строку в корзину вашего магазина. О том, как цена и остатки остаются главными в вашем оформлении заказа, см. Интеграция корзины.

resize

Виджет сообщает нужную ему высоту. Интеграция с простым iframe должна её учитывать, чтобы фрейм никогда не скроллился внутри обрезанного блока:

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

Команды родителя → виджета

SDK предоставляет их как методы ручки; сырой протокол такой:

Тип Данные Эквивалент 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',
);

Проверки origin

Обе стороны проверяют origin сообщения перед действием. SDK делает это сам; если вы реализуете протокол вручную, сверяйте event.origin с origin встраивания и игнорируйте всё, что не совпадает.