Разработка конфигуратора автомобилей Volkswagen
Цель проекта
Создать интегрируемый конфигуратор автомобилей Volkswagen с визуальной и логической сборкой машин
Разработать отдельное приложение-конфигуратор, которое принимает данные из SAP, дополняется контентом в Битриксе и позволяет пользователю подбирать, визуализировать и настраивать автомобиль с учётом комплектаций, цвета, колёс и дополнительных опций, интегрируясь на любые дилерские сайты.
Задачи проекта
- Разработать конфигуратор как отдельное приложение с возможностью интеграции на сайты дилеров.
- Настроить обмен данными с SAP и Битрикс через API.
- Реализовать визуальную сборку автомобиля с динамической сменой цвета, дисков и опций.
- Обеспечить управление комплектациями, пакетами и зависимостями между ними.
- Добавить сохранение конфигурации, передачу заявок и интеграцию с дилерскими системами.
Архитектура приложения
Отдельное приложение с интеграцией в дилерские сайты
Основные данные приходят из SAP, далее в Битриксе контент-менеджеры дополняют выгрузку.
Медиахранилище содержит сотни фотографий на каждую модель, так как учитываются цвет авто, колёса, модификации, галерея на день и на ночь. Для этого мы сделали отдельное приложение.
После эти данные уходя по API на приложение на React.
Процесс сборки
Процесс сборки автомобиля
Конфигуратор реализует пошаговый процесс подбора автомобиля. Пользователь проходит последовательность настроек, формируя итоговую конфигурацию.
Этапы сборки:
- Выбор модели
- Выбор комплектации
- Выбор цвета
- Выбор колёс
- Настройка салона
- Добавление опций
- Итоговая конфигурация
Каждый шаг влияет на последующие параметры, а финальный экран отображает полностью сформированную комплектацию автомобиля.
Шаблоны
Гибкая настройка и сохранение конфигурации
Для каждой модели клиент может задать индивидуальную обложку и определить ключевые особенности автомобиля.
Собранная комплектация сохраняется системой, а при необходимости конфигурацию можно восстановить по уникальному коду.
Визуализация
Динамический виджет автомобиля
Ключевым элементом последующих шаблонов стал интерактивный виджет. Изображение автомобиля изменяется в зависимости от выбранных параметров: цвета, дисков, салона и других опций.
Каждое изменение конфигурации мгновенно отражается в визуализации.
Цветовые решения
Генерация цвета
Цвета не загружаются как отдельные изображения. Для отображения достаточно указать HEX-код, а для двухцветных вариантов — два кода.
Эффект глянцевой или матовой поверхности реализован с помощью полупрозрачной маски, накладываемой поверх базового цвета.
Для каждой модели собиралось не менее сотни изображений. Причем каждое изображение имеет еще две версии — дневное и ночное освещение.
Дополнительный функционал
Детали, усиливающие продукт
В проекте реализован ряд функциональных доработок как на фронтенде, так и на бэкенде: постраничная печать конфигурации, изменение параметров автомобиля на итоговом экране и сквозной интерактивный виджет на всех шагах сборки.
Дополнительно внедрены шаринг в социальные сети и по электронной почте, интегрированная с SAP форма заявки и открытый API для подключения других сервисов и дилеров Volkswagen.
Отзывы
Наши публикации
Обсудим задачу
Мы свяжемся с вами, чтобы задать вопросы и обсудить задачу, цену, сроки и результат.
Это бесплатно и ни к чему вас не обязывает.