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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мелочи

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

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