2D-конфигуратор входных дверей для сайта: рабочее демо на фото клиента

Это кейс про то, как получить много вариантов товара без студийной съёмки каждого. Расскажу, что сработало, где граница метода и что остаётся допущением.

Задача

Заказчик продаёт входные двери, сайт у него сделан на конструкторе. Ему нужен конфигуратор: посетитель подбирает дверь сам, видит её на экране, считает цену и отправляет заявку. Вариантов около трёхсот, но готовых моделей за ними нет, это комбинации: напыления снаружи, облицовки изнутри (ЛДСП, МДФ и другие), ручки, шарниры.

Есть ещё параметры без картинки: толщина металла, тип конструкции, верхний и нижний замок. Они не меняют вид двери, но меняют цену, и в заявку они должны попасть.

Главное ограничение: готовых изображений нет. Есть фото отделок и ручек отдельно и бытовые снимки дверей в интерьере, сделанные под углом. Если рисовать или рендерить каждую комбинацию, подготовка картинок съест больше времени, чем сама разработка. Поэтому первым делом я проверил, можно ли обойтись одним фото.

Что я сделал

Проверка метода на фото заказчика

Взял его снимок двери и выровнял полотно по четырём углам, получилась фронтальная картинка 960 на 2050 пикселей. Дальше выровнял локальный контраст, чтобы фактура читалась ровно, и перекрасил поверхность в целевой цвет, сохранив яркость исходного снимка. Тени, блики и рельеф остаются от настоящей двери, поэтому результат не выглядит залитым краской.

Фурнитуру нужно исключить из перекраски, иначе ручка станет цвета двери. Для этого я нашёл на снимке компактные светлые участки в зоне ручки и закрыл их маской. Результат оказался пригодным, переснимать ничего не пришлось. Важное свойство: каждая модель обрабатывается один раз, а дальше цвета подставляются автоматически.

Демо в одном файле

Затем я собрал рабочее демо. Скрипт на Python готовит 12 вариантов напыления снаружи, 8 панелей изнутри и 4 цвета ручки. Ручки хранятся слоями с прозрачностью и координатами, так что одна и та же ручка встаёт на любую дверь. Картинки для веба уменьшены до ширины 480 пикселей.

Интерфейс простой: слева дверь с переключателем «снаружи и изнутри», справа выбор напыления, панели и ручки, список параметров без картинки, цена. По кнопке открывается расчёт и форма заявки. На телефоне превью двери закреплено сверху, а цена с кнопкой закреплены снизу, чтобы выбор и итог были всегда на виду.

Демо собирается в один HTML-файл около 1,2 МБ, шрифты и картинки внутри. Файл можно открыть без сервера и показать заказчику как есть. В боевой версии он встраивается на страницу сайта как отдельный блок. Похожий подход к расчёту и заявке я описывал в статье про калькулятор стоимости на сайте.

Что было сложно

Первая сложность в том, что метод имеет границу. Перекраска по яркости работает для однотонных покрытий. Светлые покрытия приходится делать менее контрастными, иначе на них появляется грязь. Для сложных рисунков и фрезеровки по МДФ одной перекраской не обойтись: рисунок нужно снимать или рисовать отдельно.

Вторая сложность в маске фурнитуры. Она ищет светлые компактные пятна в зоне ручки, и на другом снимке с другим светом её придётся подстраивать. Метки по углам листа я исключил из маски отдельным условием.

Третья сложность в данных. Список вариантов клиент присылал частями, и объём пересматривался: сначала речь шла о сорока напылениях, потом о двадцати. Конфигуратор я строил так, чтобы набор отделок лежал в таблице отдельно от кода. Тогда добавить вариант или убрать его можно без переработки.

Четвёртая сложность в согласии на обработку данных. Форма заявки собирает имя и телефон, значит рядом нужны согласие и ссылка на политику. В боевой версии нужна отдельная галочка, не проставленная заранее, со ссылкой на действующую политику сайта.

Как я проверял

Для демо есть прогон в браузере. Он открывает страницу на десктопе 1440 пикселей и на телефоне 375, нажимает на варианты, проверяет, что картинка и цена изменились, отправляет пустую форму и убеждается, что появились ошибки, потом отправляет заполненную. По моим запускам адаптивность и контраст текста проверку прошли. Проверка состояний сообщила только про образцы цвета без подписи, и я счёл это ложным срабатыванием, потому что это квадраты цвета, у которых текста нет по замыслу. Это не заменяет проверку на реальных телефонах и в реальном встраивании.

Что получилось

Продакшена здесь нет, и я не буду выдавать демо за запущенный продукт.

Что дальше

Для боевой версии нужны материалы от заказчика: фото двери снаружи и изнутри, образцы отделок, ручки и шарниры, прайс в таблице, адрес для заявок и доступ к конструктору сайта. После этого заменяются условные цены, подключается отправка, блок встраивается на страницу. Если проект окупится, можно сделать отдельные конфигураторы для других линеек дверей.

Если интересно, как строят конфигураторы с трёхмерной графикой, смотрите статьи про 3D-конфигуратор на Three.js и про конфигуратор как игру. Двумерного варианта хватает, пока товар виден спереди.

Частые вопросы

Нужно ли снимать каждую дверь в студии?

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

Можно ли встроить такой конфигуратор в сайт на конструкторе?

Да, как отдельный блок на странице, который подключается кодом. Нужен доступ к редактированию страницы и место для размещения файлов. Само демо открывается и без сайта.

Что делать, если вариантов станет больше?

Набор отделок, ручек и надбавок хранится в таблице. Новая отделка добавляется строкой и картинкой, переписывать конфигуратор не нужно.

Коротко о главном

Много вариантов не обязательно означает много съёмки. Одно фото, фронтальная заготовка и перекраска по образцам закрывают однотонные покрытия, а границу метода лучше обозначить заранее. Сейчас у меня рабочее демо на условных ценах, до боевого запуска нужны материалы заказчика и встраивание.

Если вам нужен конфигуратор, калькулятор или заявка с расчётом, посмотрите страницу про разработку сайтов и напишите мне в Telegram, MAX или VK.