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

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

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

Изначальный объём контракта предполагал, что мы разработаем сайт импортера, всех минских дилеров, сайт коммерческих автомобилей, сайты региональных дилеров, а также разработаем конфигуратор автомобилей.

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

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

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

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

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

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

01
Подготовка HTML-шаблонов, первичная натяжка на Битрикс
02
Создание структуры в Битрикс, набивка статичных разделов контентом
03
Формы сайта (тест-драйв, оценка, поиск по номеру запчасти), настройка API
04
Каталоги автомобилей, посадочные для моделей
05
Каталоги автомобилей, посадочные для моделей

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Например:

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

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

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

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

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

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

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

  • Какие поля будут в форме
  • Какой формат у каждого поля (строка, множественная строка, список, чекбокс и т.д.)
  • Откуда поля типа список подгружают контент
  • Какие поля обязательные к заполнению
  • Какие поля требуют маску валидации по каким правилам
  • Нужна ли проверка капчей
  • Куда данные с формы отправляются и в каком виде
  • Что делаем после успешной отправки формы
  • Что делаем при неуспешной отправке
  • На какой странице располагается форма
10 блоков описания, и это требуется для каждой формы на сайте!
На сайте volkswagen.by было разработано 8 различных форм, по каждому направлению деятельности:
  • письмо руководству
  • заявка на сервис
  • заявка на тест-драйв
  • поиск запчасти
  • расчет ежемесячного ТО
  • форма на кузовной ремонт
  • заявка дилеру
  • заявка с предложениями

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

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

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

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

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

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