Safe-Box

Виджет для интерактивного отображения схемы склада

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

Подключите виджет на вашу страницу:

1. Подключите зависимости

<!-- React 18 --> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Виджет --> <script src="https://stage.safe-box.ru/warehouse-widget.js"></script> <link rel="stylesheet" href="https://stage.safe-box.ru/warehouse-widget.css">

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

<div id="warehouse-container"></div>

3. Инициализируйте виджет

<script>    ReactDOM.render(       React.createElement(WarehouseWidget, {          place: 'SB3',       }),       document.getElementById('warehouse-container')    ); </script>

🎮 Демонстрация

⚙️ Параметры виджета

Параметр Тип По умолчанию Описание
place String '' Код склада
className String '' Класс блока виджета
onCellClick Function null Обработчик клика по ячейке
initialFloorName String '' Наименование этажа для показа на старте
cellNameToSelect String '' Наименование ячейки для фокуса на старте
cellIdToSelect Number null ID ячейки для фокуса на старте
showSelectedCellInfo Boolean true Показывать блок информации при выборе ячейки
initialZoom Number 1 Исходный масштаб
showFloorsSelector Boolean true Показывать выбор этажей
showLegend Boolean true Показывать легенду
onOrderClick Function null Обработчик клика по кнопке "Забронировать"
onPreOrderClick Function null Обработчик клика по кнопке "По запросу"

🎯 Расширенное использование

React.createElement(WarehouseWidget, {    place: 'SB3',    className: 'widget'    onCellClick: (cell) => {       console.log('Выбрана ячейка:', cell);    } })