1. База знаний
  2. renderer

Инициализация SDK

Booking Renderer SDK (@seatmap.pro/renderer) — это встраиваемый выбор мест, который работает на вашей странице продаж. Он подключается к Booking API, отрисовывает схему площадки с помощью WebGL и вызывает колбэки, когда покупатели выбирают или снимают выбор с мест.

Предварительные требования

  • Node.js 18+ (рекомендуется LTS)
  • Менеджер пакетов npm, yarn или pnpm
  • Опубликованная схема и событие, созданные согласно руководству Getting Started
  • Ваш Public API Key из панели Editor Admin (Organization Settings)

Шаг 1: Установите пакет

npm install @seatmap.pro/renderer

yarn add @seatmap.pro/renderer

pnpm add @seatmap.pro/renderer

Подробности о пакете: @seatmap.pro/renderer on npm

Шаг 2: Добавьте элемент-контейнер

Renderer монтируется в DOM-элемент на вашей странице. Задайте ему явные размеры:

<div id="seatmap-root" style="width: 100%; height: 600px;"></div>

Renderer полностью заполняет контейнер. Используйте CSS для управления размером схемы в рамках макета вашей страницы.

Шаг 3: Инициализируйте renderer

import { SeatmapBookingRenderer } from '@seatmap.pro/renderer';

const container = document.getElementById('seatmap-root')!;

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: (seat) => {
    console.log('selected', seat);
  },
  onSeatDeselect: (seat) => {
    console.log('deselected', seat);
  },
});

await renderer.loadEvent('YOUR_EVENT_ID');

Обязательные значения:

Шаг 4: Обработайте выбор места

Колбэк onSeatSelect срабатывает каждый раз, когда покупатель нажимает на доступное место. Используйте его для синхронизации выбора с вашей корзиной или бэкендом.

Для продакшн-тикетинга рекомендуется паттерн «блокировка по клику»: блокируйте место в вашем бэкенде сразу при выборе и снимайте блокировку при снятии выбора.

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: async (seat) => {
    await fetch('/api/cart/lock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
  onSeatDeselect: async (seat) => {
    await fetch('/api/cart/unlock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
});

Полную справку по колбэкам и настройкам см. в Renderer Spec.

Попробуйте вживую

Откройте Renderer Playground, чтобы поэкспериментировать с SDK в интерактивном режиме – без какой-либо настройки.

Полный рабочий пример также доступен на CodePen.

Устранение неполадок

Контейнер не виден – renderer нуждается в контейнере с ненулевой шириной и высотой. Если ничего не появляется, убедитесь, что у элемента-контейнера заданы явные CSS-размеры.

Ошибки CORS – renderer получает данные с booking.seatmap.pro. Если вы используете прокси или собственный домен, убедитесь, что ваш сервер пересылает запросы в Booking API с корректным заголовком Origin.

Места не отображаются – проверьте, что событию назначены цены на места. Renderer показывает только места, у которых есть хотя бы одна назначенная цена.

Узнать больше