Виджет интернет-магазина
События
Протокол 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 встраивания и игнорируйте всё, что не совпадает.