Конструктор откатных ворот с превью в реальном времени
Год создания: 2026, Javascript
Задача
Решение
Калькулятор сделан как часть основного сайта bobmaster.ru, а не как отдельная страница со своим дизайном. Сверху и снизу — общий хедер и футер сайта, та же навигация, те же контакты. Клиент не чувствует, что ушёл куда-то в сторону.
Внешний вид
Визуально калькулятор состоит из 4-х секций. 1 – Шаги, 2 – Выбор, 3 – Внешний вид, 4 – Окно расчета.
Превью как в Photoshop
Главная фишка — визуальное превью ворот в реальном времени. Сделано на 21 PNG-слое, которые накладываются друг на друга по мере выбора опций:
- подложка (пустой стенд) — видна всегда
- ролики — появляются при выборе типа ворот
- полотно выбранного типа — окрашивается в выбранный RAL
- калитка и столб — появляются при выборе отдельностоящей калитки
- автоматика — появляется при выборе привода
Перекраска в любой из 10 цветов RAL — мгновенная, без перезагрузки и без перерисовки PNG. Работает через SVG-фильтры feColorMatrix: каждый цвет — отдельный фильтр, применяется к картинке полотна. Никакого WebGL и 3D — работает на любом устройстве, включая старые телефоны.
Логика расчёта
8 шагов, 5 типов ворот с разной ценой за квадратный метр, матрица «ширина × высота → цена». Зависимые опции подключаются автоматически: замки и фурнитура — только при отдельностоящей калитке, монтаж обшивки — только при заказе обшивки. Фундамент — информационный шаг, не плюсуется к цене, менеджер обсуждает его отдельно. При выборе «без монтажа» клиент получает скидку 10% на полотно — в расчётном листе старая цена зачёркивается, новая показывается зелёным. Расчётный лист обновляется на каждом шаге. Пока клиент не прошёл шаги 1–7, кнопка «Отправить заявку» неактивна. В шаге 8 — баннер «Заполните все шаги» с кнопкой, которая прыгает на первый пропущенный шаг. Менеджер получает заявку с уже посчитанной суммой и всеми параметрами — пересчитывать не нужно.
Интеграция в сайт
Деплой в подраздел /calc/ как index.php. Хедер и футер подключаются через PHP-инклюды — те же, что на остальных страницах сайта. Стили калькулятора изолированы от глобальных стилей сайта через класс .calc-scope с точечным сбросом: только на тех свойствах, которые сайт перебивает глобально, иначе ломает нашу раскладку.
Что под капотом
Frontend: vanilla JS, без jQuery и без сборки — один HTML-файл, всё внутри. CSS Grid + Flexbox, адаптив на 5 брейкпоинтах (1100 / 900 / 768 / 480 плюс десктоп). Мобильная версия: колонки складываются в один поток, карточки в один столбик, шаги прогресса в сетку 4×2 вместо восьми строк. Кастомные чекбоксы и радиокнопки через label и скрытый input — одинаково выглядят на iOS и Android.
Backend: PHP-инклюды для общего хедера и футера. AJAX-форма: клиент отправляет заявку, сервер присылает код подтверждения на email, клиент вводит код, заявка сохраняется в архив orders/. Без фреймворка — на остальном сайте легаси Yii 1, и калькулятор работает в том же окружении.
Алгоритм превью: показать подложку, если выбран тип ворот — добавить ролики и полотно, покрасить в RAL, если выбрана отдельностоящая калитка — добавить столб и калитку, если выбрана автоматика — добавить привод
RAL через SVG-фильтры: каждому из 10 цветов — свой filter с feColorMatrix. Применяется через filter: url(#ral-XXXX) к картинке полотна. Перекраска мгновенная, без перерисовки PNG.
Цифры
- 8 шагов конструктора
- 5 типов полотна — от 98 588 ₽ до 169 986 ₽ за базовый размер
- 10 цветов RAL — без окраски плюс 9 RAL, включая антрацит 7016
- 21 PNG-слой для превью, 1037×424
- 10 SVG-фильтров для мгновенной перекраски
- 5 брейкпоинтов адаптива
- 3 состояния калитки — нет, в полотне, отдельностоящая
- 2 варианта автоматики NICE — RB600DKCE за 59 900 ₽ и RB600BDKLT за 50 900 ₽
Результат
Калькулятор встроен в боевое окружение сайта — общий хедер, футер, навигация, контакты. Заявка приходит с уже посчитанной суммой и параметрами: менеджеру не нужно пересчитывать на бумажке. Клиент видит итог до отправки — меньше сюрпризов в финальном счёте, меньше отказов после расчёта. Мобильная версия проходит все 8 шагов на iPhone SE без горизонтального скролла. Все заявки сохраняются в архив orders/ — можно отслеживать конверсию по шагам и видеть, где клиенты отваливаются.