Необходимо было разработать полностью рабочий визуальный конфигуратор пластиковых окон, который:
Меняет внешний вид окна в реальном времени при выборе опций (цвет профиля, откосов, подоконника, фурнитуры, глянец, скрытые петли).
Поддерживает 4 типа окон (одностворчатое, двухстворчатое, трёхстворчатое, балконный блок) с множеством подтипов.
Использует фотореалистичные PNG-слои (по 50+ изображений на каждый тип окна), которые накладываются друг на друга.
Адаптирован под любые устройства (компьютер, планшет, телефон, включая очень маленькие экраны 360px).
Встраивается в Tilda (Zero Block) и работает с её системой масштабирования (Autoscale).
Позволяет выбирать цвет стены через цветовой пикер (color picker).
Отображает умные названия кнопок "исполнение": "без ручек", "с 1 ручкой", "с 2 ручками" и т.д., в зависимости от количества единиц в коде подтипа.
Техническая архитектура
Вёрстка: Flexbox + медиазапросы для адаптации под 4+ брейкпоинта (1600px, 900px, 700px, 400px, 360px).
Изображения: Для каждого типа окна и каждого цвета созданы PNG-слои с прозрачностью (профиль, откосы, подоконник, петли, глянец, фон). Скрипт динамически подставляет нужный URL в зависимости от выбранных опций.
Логика: JavaScript хранит состояние, обновляет src изображений, управляет видимостью слоёв (глянец, скрытые петли), переключает названия кнопок исполнения.
Интеграция с Tilda: Использован Zero Block с параметрами: ширина 1px, высота 1px, Autoscale to Window Width, высота Grid контейнера — Auto, Overflow — Show. Это позволило блоку корректно масштабироваться на всех устройствах без обрезания контента.
✅ Полностью рабочий конфигуратор, встроенный в Tilda и протестированный на реальных устройствах (Desktop, iPad, iPhone с 360px).
✅ Все изображения загружаются (консоль без ошибок 404), слои переключаются мгновенно.
✅ Адаптивная вёрстка: на компьютере — две колонки (изображение + панель), на мобильных — вертикальное расположение с комфортными размерами кнопок и изображения.
✅ Удобный UI: понятные названия кнопок, цветовой пикер, чекбоксы для глянца и скрытых петель.
✅ Поддержка сложной структуры: 4 типа окон, десятки подтипов, сотни PNG-файлов.
✅ Готовый код (HTML/CSS/JS) полностью самодостаточен и не требует внешних зависимостей (кроме самих изображений).
Пожаловаться
