Разработка сайта Volkswagen.by и сайтов регионов
Изначальный объём контракта предполагал, что мы разработаем сайт импортера, всех минских дилеров, сайт коммерческих автомобилей, сайты региональных дилеров, а также разработаем конфигуратор автомобилей.
Планируем архитектуру проекта
Планируем дорожную карту
Особенностью проекта было то, что немцы планировали отключить старые CMS с 1 января 2018 года. Поэтому проект нужно было закончить фактически за осень — начало зимы.
Решили разбить спринты реализации проекта следующим образом:
Очередность этапов определяется их наследованием, например вы не можете делать формы на сайте, когда у вас ещё нет самих страниц, собранных на втором этапе.
Пока клиент занимается приёмкой этапа, команда делает следующий и так до победы.
Собираем структуру проекта
Готовим шаблон
Дизайн-гайды VW разрабатываются в Германии, а наша задача — реализовать их в соответствии с документацией. Отступы, кнопки, сетка, шрифты и размеры должны совпадать с общемировым стандартом бренда.
Так как это уже всё было собрано, и были уже реализованные сайты образцы, шаблоны мы готовили сразу в HTML.
Этому блоку реализовали индивидуальную настройку для каждой страницы таким образом, чтобы состав виджетов подходил по смыслу к содержанию страницы.
Работа с текстовыми страницами
На сайте много текстовых страниц, а особенно их много на страницах моделей и в разделе сервис.
Чтобы эти страницы не смотрелись постно, мы сделали большую галерею сниппетов, которые использовались для наполнения страниц. Слайдеры, картинки на всю ширину, фото слева текст справа и остальное многообразие подачи контента готовилось сразу для частого использования и независимо от контента.
- Текстовый блок
- Картинка слева, текст справа
- Картинка справа, текст слева
- Табы, картинка справа
- Табы, картинка слева
- Расхлоп
- Картинка на всю ширину и текст слева
- Картинка на всю ширину и текст справа
- Три в ряд
- Блок с видео
- Картинка на всю ширину без текста
- Набор иконок в два ряда
- Две картинки в ряд с подписями
- Поп-ап с контентом
- Фото слайдер с картинками и табами
Работа с автомобилями
Каталог, подбор по характеристиками автомобилей, разбивка на цвета, комплектации модели.
Удобство каталога в том, что данные обновляются каждый день и берутся с реального склада, поэтому на сайте можно забронировать автомобиль нужного цвета и комплектации.
Еще стоило бы отметить работу со складом. Данные из API приходили в сыром виде, поэтому мы написали свою таблицу соответствия, которая реально отображала, что происходит с автомобилем.
Например:
- На складе дилера (адрес)
- На складе импортера
- В процессе доставки
Данные обновляются каждый день, поэтому можно следить за доставкой автомобиля из Германии.
Каждая посадочная страница модели собирается исходя из контента, поэтому каждая подача индивидуальна, но всегда в рамках гайда. Каждую страницу мы собираем вручную.
Модели интегрированы с каталогом, можно сразу посмотреть характеристики, посчитать размер кредита.
Работа с формами
Работа с формами при сборке корпоративного сайта — самое сложное для дилетантов. Проблема в том, что чаще всего менеджеры просто не умеют правильно собирать к ним требования.
Чтобы при разработке не было вопросов, нужно решить для каждой формы несколько ключевых моментов:
- Какие поля будут в форме
- Какой формат у каждого поля (строка, множественная строка, список, чекбокс и т.д.)
- Откуда поля типа список подгружают контент
- Какие поля обязательные к заполнению
- Какие поля требуют маску валидации по каким правилам
- Нужна ли проверка капчей
- Куда данные с формы отправляются и в каком виде
- Что делаем после успешной отправки формы
- Что делаем при неуспешной отправке
- На какой странице располагается форма
- письмо руководству
- заявка на сервис
- заявка на тест-драйв
- поиск запчасти
- расчет ежемесячного ТО
- форма на кузовной ремонт
- заявка дилеру
- заявка с предложениями