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

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

У VW, как у других автомобильных брендов, существует сменяемость поколений дизайна. С реализацией нового (пятого) поколения сайтов нужно было также сменить и уже устаревший немецкий движок.
Изначальный объём контракта предполагал, что мы разработаем сайт импортера, всех минских дилеров, сайт коммерческих автомобилей, сайты региональных дилеров, а также разработаем конфигуратор автомобилей.
В качестве платформы выбрали Битрикс, так как мы его хорошо знаем, и он хорошо подходил для данной задачи. На сайте много контента, а админка битрикса хорошо подходит для работы с текстовыми страницами, как при использовании инфоблоков, так и при редактированиии файлов.
В рамках разработки требовалось также реализовать интеграцию форм с SAP, используя атлантовский api, но данная задача все равно потребовала бы ручной реализации на любом движке, так что на выбор это не повлияло.

Планируем структуру проекта

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


Планируем дорожную карту

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

Решили разбить спринты реализации проекта следующим образом:

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


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

Пока клиент занимается приёмкой этапа, команда делает следующий и так до победы.

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

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


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

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

Так как это уже всё было собрано, и были уже реализованные сайты образцы, шаблоны мы готовили сразу в HTML.

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

Работа с текстовыми страницами

На сайте много текстовых страниц, а особенно их много на страницах моделей и в разделе сервис.

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

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

Чтобы не запутаться в многообразии блоков, мы собрали wiki с размерами фото и файл-образец каждого сниппета с превью:

  1. Текстовый блок
  2. Картинка слева, текст справа
  3. Картинка справа, текст слева
  4. Табы, картинка справа
  5. Табы, картинка слева
  6. Расхлоп
  7. Картинка на всю ширину и текст слева
  8. Картинка на всю ширину и текст справа
  9. Три в ряд
  10. Блок с видео
  11. Картинка на всю ширину без текста
  12. Набор иконок в два ряда
  13. Две картинки в ряд с подписями
  14. Поп-ап с контентом
  15. Фото слайдер с картинками и табами

Работа с автомобилями

Каталог, подбор по характеристиками автомобилей, разбивка на цвета, комплектации модели.

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

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

Например:

На складе дилера (адрес)
На складе импортера
В процессе доставки

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

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

Каждую страницу мы собираем вручную.

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

Работа с формами

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

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

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

10 блоков описания, и это требуется для каждой формы на сайте!

На сайте volkswagen.by было разработано 8 различных форм, по каждому направлению деятельности: письмо руководству, заявка на сервис, заявка на тест-драйв, поиск запчасти, расчет ежемесячного ТО, форма на кузовной ремонт, заявка дилеру, заявка с предложениями.

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

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


Работа с дилерами

Донор volkswagen.by
Экосистема сайтов дилеров
VW-Гродно
VW-Брест
VW-Гомель
VW-Витебск
VW-Могилев
VW-Минск
VW-коммерческие авто

Сайты дилеров и сайт коммерческих автомобилей можно было делать несколькими путями. Первый — реализовать их через многосайтовость на Битриксе". Это означало бы, что у всех сайтов будет единая панель администрирования. Это даёт преимущество в случае, когда один и тот же контент нужно отображать на разных сайтах.

Второй — сделать дубликаты с сайта донора и на отдельных лицензиях собрать свои сайты. Сайты будут полностью независимы, но это требует отдельную лицензию на каждый сайт и перенос контента с соседних сайтов в полуручном режиме (импорт xml).

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

Руководитель проекта
Дима Хоружко
Юра Иов
Дизайн
Сергей Шишпор
PHP разработчик
Денис Иванов
Архитектор
Дима Хоружко
Верстка
Павел Кряквин
Команда клиента
Михаил Ярошук