Конфигуратор окон — 10 шагов, движок правил и 3D-предпросмотр прямо в браузере.
Это живое демо показывает полноценный конфигуратор технического продукта: материал, тип окна, размеры, способ открывания, профиль, цвет и декор, фурнитура, ручки, остекление и аксессуары. Движок ограничений сохраняет корректность каждой комбинации, 3D-предпросмотр следует за каждым изменением, цена обновляется в реальном времени. Так мы строим конфигураторы для производителей, дистрибьюторов и подрядчиков.
Живое демо: настройте сами
Выберите материал, задайте размеры, определите открывание и остекление – любой шаг можно отменить или повторить. Виджет загружается по клику на «Запустить».
Примечание: Демо со встроенным примерным каталогом: продукты, опции и цены иллюстративны и не являются предложением. В продакшене каталог, правила и цены поступают из бэкенда (мультитенантный API), а результат передаётся в магазин, CRM или процесс расчёта. В этом демо данные не собираются.
Что технически показывает это демо
- Мастер из 10 шагов с движком ограничений: недопустимые комбинации блокируются или автоматически исправляются
- 3D-предпросмотр окна в реальном времени (Three.js / React Three Fiber) – рама, створки, глубина профиля и остекление следуют за каждым изменением
- Цена в реальном времени из базовой цены, размеров, опций и надбавок, пересчитывается на каждом шаге
- Отмена/повтор по всей конфигурации, а также сохранение и отправка ссылки на конфигурацию
- Мультитенантность: каталог, правила и цены для каждого клиента из бэкенда JSON:API
- Передача в магазин: готовая конфигурация попадает в корзину (Shopware) или в запрос на расчёт
- Встраивается как изолированный виджет Shadow DOM – без конфликтов стилей с сайтом, интерфейс DE/EN
- Производительность: загрузка по клику, один самодостаточный файл, без внешних запросов
От конфигуратора к конвейеру quote-to-order
Такой конфигуратор – это фронтенд полного процесса quote-to-order. Он превращает выбор клиента в уникальную корректную конфигурацию, формирует цену и спецификацию и структурированно передаёт результат в магазин, ERP или процесс расчёта – тот же конвейер, что мы используем для автоматизации КП и CPQ.
Для продуктивной версии мы подключаем ваш каталог продуктов и правила ценообразования, переносим ваш визуальный язык и настраиваем передачу: корзина, форма запроса, КП в PDF или прямая запись в ERP. Правила и цены хранятся на сервере; браузер показывает только то, что отдаёт API.
Другие проекты конфигураторов
Фотореалистичный 3D-конфигуратор: драгоценные металлы, профили шинки, закрепка камней и игра бриллианта в браузере.
Посмотреть проект →Планирование заборов перетаскиванием с автоматическим списком материалов, ценой в реальном времени и прямой передачей корзины.
Посмотреть проект →Конфигуратор из 5 шагов с 3D-предпросмотром в реальном времени, списком материалов и выводом в PDF.
Посмотреть проект →