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

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

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

• Переработать архитектуру сайта с учётом реальных процессов работы клиента.
• Обеспечить самостоятельное управление моделями, ценами и характеристиками из админки.
• Спроектировать структуру хранения данных для моделей, комплектаций и опций.
• Обновить дизайн и внедрить гибкую систему контентных блоков.
• Реализовать конструктор форм и интеграцию сайта с 1С через «REST API».
• Объединить головной сайт и сайты дилеров через единый шаблон для упрощения обновлений.

Архитектура сайта и структура разделов

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

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

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

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

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

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

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

Основная сложность

Таблицы цен и спецификаций должны формироваться без редактирования HTML. Проблема — большое количество зависимостей между моделями, модификациями, комплектациями и пакетами опций.

Что учитывала архитектура:

• у каждой модели несколько модификаций;
• у модификаций свои комплектации и характеристики;
• комплектации содержат наборы опций;
• доступны пакеты дополнительных опций.

Логика хранения данных:

Структура строится от модели автомобиля: сначала определяется модель, затем модификации и комплектации, после — характеристики и опции.

Для этого была заранее проработана иерархия связей, показанная на схеме.  

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

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

360° обзор автомобилей

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

Конструктор форм и REST-API для 1С

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

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

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

Интеграция сайта с 1С через API

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

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

• все запросы выполняются только через защищённое SSL-соединение;
• доступ к API разрешён только с сервера «hyundai.by» (93.125.99.86);
• данные в API актуальны только в момент выполнения запроса;
• ответы передаются в формате JSON;
• кодировка обмена данными — «UTF-8».  

Единый шаблон для всей дилерской сети

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

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