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

Быстрый старт

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

Updated 27 October 2026

Это руководство превращает обычную страницу товара в рабочий встроенный планировщик. Перед началом убедитесь, что у вас есть две вещи из аккаунта Scalarcut: ключ виджета и каталог. Оба создаются при регистрации.

1. Загрузите SDK

Добавьте SDK Scalarcut на страницу. Это небольшой скрипт без зависимостей:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>

2. Добавьте контейнер

Зарезервируйте элемент, в котором будет рендериться планировщик. Виджет заполняет контейнер и меняет свой размер по мере работы покупателя:

<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>

3. Смонтируйте виджет

<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
    locale: 'en',
    currency: 'USD',
    onAddToCart(payload) {
      // Add the resolved lines to your own cart.
      payload.lines.forEach((line) => {
        yourStore.addToCart(line.sku, line.qty, line.unit);
      });
    },
  });
</script>

Это вся интеграция. Виджет загружает ваш каталог, привязывается к размерам просматриваемого SKU и возвращает распознанные строки корзины через onAddToCart.

4. Держите SKU в актуальном состоянии

Если покупатель переключится на другой товар, пока страница открыта, сообщите об этом виджету:

const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');

Виджет меняет материал, сохраняет раскладку покупателя и пересчитывает количество.

Что происходит дальше

  • Покупатель описывает стену или пол, видит каждый рез и может открыть список резов и чертёж.
  • Когда он нажимает Добавить в корзину, ваш колбэк onAddToCart получает { lines, layoutFingerprint, layoutToken }, и ваш магазин добавляет позиции.
  • Из вашего магазина ничего не уходит: цена, остатки и оформление заказа остаются ровно там, где были.

Дальнейшие шаги