Добавьте виджет в магазин

Виджет — это автономный iframe. Добавить его на страницу можно двумя способами. SDK — рекомендуемый путь, потому что он берёт на себя обмен сообщениями, изменение размеров и синхронизацию корзины.

SDK (рекомендуется)

SDK оборачивает iframe и протокол postMessage в один небольшой API:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>
<div id="sc-tiling"></div>
<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
  });
</script>

SDK определяет хост встраивания из URL самого скрипта, поэтому один и тот же сниппет работает в любом магазине и в любом регионе. Он также следит за контейнером и держит правильную высоту фрейма и на десктопе, и на мобильных.

Простой iframe

Если вы предпочитаете рендерить iframe самостоятельно, укажите его на URL виджета со своими параметрами:

<iframe
  src="https://embed.scalarcut.com/v1/tiling?wk=YOUR_WIDGET_KEY&catalog=YOUR_CATALOG_SLUG&sku=CURRENT_PRODUCT_SKU&locale=en"
  style="width: 100%; height: 880px; border: 0;"
  title="Tile layout"
  allow="fullscreen"
  allowfullscreen
></iframe>

Для синхронизации корзины SDK всё же лучше: с простым iframe вы сами слушаете события postMessage виджета. См. События.

Размеры

Виджет занимает всю ширину контейнера и сам управляет своей высотой.

• Десктоп — SDK стартует с высоты 880 px и автоматически растёт, если интерфейсу нужно больше места.
• Мобильные — виджет использует всю высоту окна, чтобы холст и панель сметы оставались удобными на телефоне.

Если нужен более низкий стартовый фрейм, задайте height:

ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  catalog: 'YOUR_CATALOG_SLUG',
  height: 720,
});

Размещение

Размещайте виджет на странице товара, под или рядом с галереей. Он привязан к одному SKU, поэтому ему место там, где покупатель уже выбрал товар — плитку, ламинат, LVT, слэб или инженерную доску.

• Один SKU на монтирование. Если страница показывает варианты, передавайте SKU выбранного варианта и вызывайте setSku при его смене.
• Он загружается лениво. SDK ставит loading="lazy" на фрейм, поэтому страница остаётся быстрой, когда виджет ниже линии сгиба.
• Одного виджета на страницу достаточно. Один и тот же экземпляр обрабатывает стены и полы.

HTTPS

Виджет отдаётся по HTTPS и в проде требует родительскую страницу по HTTPS. Ваш ключ виджета привязан к зарегистрированным доменам, поэтому он загружается только на ваших сайтах — подробнее в Безопасность и лицензирование.