Международный автомобильный холдинг „Атлант-М“ торгует 10 автомобильными марками, в том числе Volkswagen. Для данного бренда нужно было разработать конструктор автомобилей по образцу немецкого проекта.

Разработка конфигуратора автомобилей Volkswagen

Модели автомобилей собираются как конструктор Lego, но есть особенности. Например, черная крыша может идти только в комплектации Sport. Наш код должен это учитывать.

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

Архитектура приложения

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

Основные данные приходят из SAP, далее в Битриксе контент-менеджеры дополняют выгрузку.

Медиахранилище содержит сотни фотографий на каждую модель, так как учитываются цвет авто, колёса, модификации, галерея на день и на ночь. Для этого мы сделали отдельное приложение.

После эти данные уходят по api на приложение на реакте.

Процесс сборки автомобиля

У конфигуратора этап сборки состоит из 8 шагов. Система следит за каждым выбором пользователя и проверяет его на соответствие спецификациям VW.

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

Модель

Комплектация

Цвет

Колеса

Салон

Опции

Итог

Готовим шаблоны

На каждый автомобиль клиент может задавать свою обложку и выбирать главные особенности.

Каждую комплектацию система сохраняет и при желании можно восстановить собранную конфигурацию по коду.

Особенностью всех последующих шаблонов будет этот виджет. Изображение на нём меняется в зависимости от вашего выбора. Поставили новые диски? Выбрали другой цвет? Поменяли салон? Всё это отражается на данном виджете.

Цвета не приходится заливать как картинки. Верстка сделана таким образом, что для задачи цвета достаточно записать его HEX-код. Если цвета два, то соотстветственно два кода.

Эффект бликовой или матовой поверхности достигается за счет накладываемой поверх полупрозрачной маски.

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

Пересечений может быть несколько, причем в обе стороны. Иногда нужно что-то добавить, иногда убрать. Система предлагает добавить недостающую опцию во всплывающем окне, не уводя со страницы.

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

Мелочи

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

шеринг в соцсети и на почту, интегрированная с SAP форма заявки, открытый API для других сервисов и дилеров VW.

Команда проекта

Руководитель проекта

Юра Иов

PHP разработчики

Денис Иванов

Игорь Билиба

Команда клиента

Кирилл Малышко

Михаил Ярошук

Фронтенд разработчик

Игорь Билиба

Верстка

Влад Портной