ООО «Хёндэ АвтоГрад» — единственный авторизованный дистрибьютор Hyundai Motor Company и марки Hyundai в Республике Беларусь. Требовалось обновить дизайн до нового поколения.

Сайт и дилерская сеть дистрибьютора Hyundai в Беларуси

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

Брифуем клиента

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

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

Для технической реализации хватило движка Битрикс на PHP и MySQL и шаблонов на HTML5. Данный проект по своей сложности идеально подходит под этот движок.
Сама структура достаточно типичная для автомобильного бренда. Отдельно сервисники, отдельно автомобили, отдельно маркетинг и информация о программах покупки. Контакты обычно выносим в первый уровень, чтобы повесить ссылку на первый уровень вложенности.
Зеленым отмечены страницы с уникальными шаблонами — это сноска для дизайнера и проектировщика, какие страницы собирать на своих шаблонах.


Структура автомобиля

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

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

Структура хранения характеристик автомобиля

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

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

Работа с дизайном

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

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

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

Реализация форм и REST-api для работы с 1С

На сайте используется несколько форм: заказать звонок, заявка на ТО, заявка на сервис, купить автомобиль, заявка на трейд-ин.

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

Далее формы собираются как конструктор. При желании клиент может их и сам собирать.

REST-api и интеграция с 1С

Изначально формы отправляли заявки на эл. почту, но это неудобно. Нас попросили разработать архитектуру и правила обмена сайта с 1С.

Основные принципы работы с API:

любые запросы к API возможны только через безопасное SSL соединение на адрес https://-------------
сервисы API доступны только с сервера hyundai.by (93.125.99.86)
информация в API актуальна исключительно в момент выполнения запроса
все ответы API предоставляются в формате JSON
кодировка для отправки/получения данных - UTF-8

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


Хотя в целом работа с дилерами построена по схожей схеме, как для VW, все же она имеет свою особенность.

Реализация разделенных сайтов накладывает сложности при обновлениях. Пример, вы обновили шаблоны навигации, и теперь вам предстоит это сделать ещё 6 раз для каждого дилера.

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

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

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

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