Разработка сайта Volkswagen.by и сайтов регионов

Международный автомобильный холдинг «Атлант-М» торгует 10 автомобильными марками, в том числе «Volkswagen».

Разработать единый сайт «Volkswagen» в Беларуси и систему региональных сайтов

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

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

Техническая схема работы сайта

С технической точки зрения проект имел относительно простую структуру. Для реализации использовали «Битрикс» (PHP, MySQL) и шаблоны на «HTML5».

«Битрикс» получает каталоги автомобилей через «API», сохраняет данные в базе, собирает шаблоны страниц и маршрутизирует заявки через «API» в «SAP» клиента. Для региональных сайтов заявки отправляются на электронную почту или в 1С.  

Жёсткие сроки и поэтапная реализация

Особенностью проекта стало ограничение по времени: старые «CMS» должны были быть отключены с 1 января 2018 года, поэтому разработку нужно было завершить за осень — начало зимы.

Проект разбили на последовательные спринты:

1. Подготовка HTML-шаблонов и первичная интеграция с «Битрикс»;
2. Создание структуры сайта и наполнение статичных разделов;
3. Реализация форм (тест-драйв, оценка, поиск запчастей) и настройка «API»;
4. Каталоги автомобилей и посадочные страницы моделей;
5. Доработка каталогов и посадочных страниц.

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

Собираем структуру проекта

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

Структура страницы автомобиля

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

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

Такие решения закладываются на этапе проектирования структуры — ещё до начала фактической разработки.  

Индивидуальные виджеты для страниц

Для этого блока реализовали индивидуальные настройки на уровне каждой страницы, чтобы состав виджетов соответствовал её содержанию и контексту.

Галерея сниппетов для контента

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

В неё вошли слайдеры, изображения на всю ширину, блоки «фото слева — текст справа» и другие варианты подачи контента. Все элементы разрабатывались как универсальные и готовые к частому использованию независимо от содержания страницы.  

«Wiki» со всеми типами сниппетов

Чтобы упростить работу с большим количеством блоков, собрали «wiki» с размерами изображений и примерами каждого сниппета с превью.

В систему вошли основные варианты контентных блоков: текстовые секции, комбинации изображения и текста, табы, расхлопы, полноширинные изображения, блоки «три в ряд», видео, наборы иконок, слайдеры, поп-апы и другие типовые элементы для наполнения страниц.  

Каталог с данными реального склада

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

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

В системе учитываются основные состояния:

• на складе дилера;
• на складе импортёра;
• в процессе доставки.

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

Живые данные склада и страницы моделей

Данные по складу приходили из «API» в сыром виде, поэтому была разработана собственная таблица соответствий, которая корректно отображала реальный статус автомобиля — на складе дилера, у импортёра или в процессе доставки. Информация обновляется ежедневно, что позволяет отслеживать движение автомобиля из Германии.

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

Формы как самый сложный элемент корпоративного сайта

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

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

На сайте «volkswagen.by» было разработано 
8 различных форм:

• письмо руководству
• заявка на сервис
• заявка на тест-драйв
• поиск запчасти
• расчет ежемесячного ТО
• форма на кузовной ремонт
• заявка дилеру
• заявка с предложениями  

Образец логики работы заявки на ТО

Иногда форма не только должна содержать все, описанные выше, поля, но ещё учитывать логику обработки и обогащения данных внешними сервисами по «API»:

Два подхода к реализации дилерских сайтов

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

Первый вариант — многосайтовость на «Битриксе» с единой панелью администрирования. Такой подход удобен, когда один и тот же контент нужно показывать на разных сайтах.

Второй вариант — создание отдельных копий сайта на независимых лицензиях. В этом случае сайты полностью автономны, но требуется отдельная лицензия для каждого и перенос контента между проектами в полуавтоматическом режиме через «XML».