Заказчик — один из крупнейших российских ИТ-дистрибьюторов с портфелем из нескольких сотен вендоров и широкой сетью партнеров по всей стране. Компания работает на рынке более 30 лет.
Сайт служит основной точкой входа для нескольких групп аудитории: дилеров, которые ищут продукцию и условия сотрудничества, вендоров, рассматривающих возможности партнерства, и корпоративных заказчиков, изучающих сервисы и экспертизу дистрибьютора.
Сложность проекта определялась не только объемом контента, но и необходимостью сохранить накопленный SEO-вес страниц, обеспечить бесшовную миграцию данных и интегрировать новый сайт с действующим B2B-порталом компании.
Контекст
•
Старый сайт на MODX имел ряд архитектурных и пользовательских ограничений, которые тормозили развитие цифрового канала.
Основные сложности:
•
Разрозненное управление контентом. Используемая CMS ограничивала возможности управления контентом и развития сайта: изменения структуры и добавление новых типов страниц часто требовали доработок со стороны разработчиков.
•
Отсутствие гибкой интеграции. Архитектура не позволяла легко настраивать обмен данными с B2B-порталом и внутренними сервисами компании.
•
Сложности с обновлением. Значительное количество кастомных доработок создавало риски при обновлении CMS.
Требовалась не просто редизайн-разработка, а полноценная смена технологической платформы с сохранением всего ценного контента и позиций в поисковой выдаче.
Цель
01
Создать современную, масштабируемую цифровую платформу, которая:
01
объединит управление всеми типами контента в единой административной среде
02
обеспечит быстрый и понятный доступ к информации для всех групп аудитории
03
позволит гибко интегрироваться с B2B-порталом и другими сервисами компании
04
сохранит и улучшит поисковую видимость сайта после миграции данных.
Реализация
•
Ключевой особенностью проекта стало то, что дизайн-макеты разрабатывались командой другого подрядчика, а наша задача заключалась в их верстке, интеграции с CMS и построении всей технической архитектуры.
Аналитика
•
Мы начали с детального анализа предоставленных макетов в Figma. Front-end-команда составила карту всех уникальных компонентов на каждой странице и унифицировала их для дальнейшей разработки. Это позволило сократить дублирование кода и упростить поддержку сайта в будущем. Также согласовали с клиентом единые принципы адаптивной верстки и поведения интерактивных элементов.
Архитектура и стек
•
Мы предложили headless-подход, который разделяет frontend и backend. Это дает независимость в развитии обеих частей и позволяет в будущем наращивать функциональность без перестройки всей системы.
•
Frontend. Реализован как одностраничное приложение на Vue.js. Все страницы собираются на клиентской стороне, данные запрашиваются через REST API. Это обеспечило плавный, быстрый интерфейс без перезагрузок страницы при навигации.
•
Backend. В качестве CMS и источника данных выбрана «1С-Битрикс». Мы настроили его как API-сервер, который отдает структурированные JSON-ответы на запросы фронтенда. В административной части контент-менеджеры работают в привычной среде 1С-Битрикс, а для гибкого наполнения страниц мы внедрили визуальный редактор sprint.editor.
•
Интеграции. Сайт обменивается данными с B2B-порталом клиента через API, использует сервис Dadata для автоматического определения геолокации пользователей, а данные обращений передаются в специальный прокси-сервис для автоматической постановки задач во внутренний трекер клиента.
Миграция данных
•
Одной из самых трудоемких задач стала миграция данных со старой CMS. Нам требовалось перенести более 6 400 записей, включая новости, страницы вендоров, промо-программы и иерархический каталог продукции.
Мы разработали автоматизированный процесс миграции, который включал:
•
Извлечение данных из таблиц MODX.
•
Маппинг полей — сопоставление структуры старой базы с инфоблоками «1С-Битрикс».
•
Конвертацию контента из старого конструктора в формат sprint. editor (поддерживались галереи, цитаты, текстовые блоки, кнопки, слайдеры, видео).
•
Инкрементальное обновление — возможность повторного запуска миграции для дозагрузки новых или измененных данных без удаления уже перенесенных.
•
Это позволило не только сохранить весь архив контента, но и актуализировать его непосредственно перед запуском.
Цель
01
В ходе разработки мы реализовали несколько сложных компонентов, которые определили удобство работы с сайтом.
01
Система вендоров и каталог продукции. Мы создали единый механизм управления сотнями карточек вендоров и многоуровневым каталогом. На странице списка вендоров работает динамический алфавитный фильтр: буквы, по которым нет данных, автоматически деактивируются. Детальная страница вендора собирает информацию из разных инфоблоков — категории продукции, новости, баннеры, промо, вебинары, полезные материалы — и отображает их в структурированном виде.
02
Страница сервиса. Для страниц сервисов мы реализовали адаптивные UX-решения: табы с навигацией, которые фиксируются при скролле, аккордеоны с возможностью встраивания медиаконтента, а также формы обратной связи с автозаполнением полей на основе данных пользователя.
03
Интерактивная карта контактов. На странице контактов мы разместили SVG-карту России с точками присутствия. Администратор может добавлять новые точки и задавать им координаты прямо из CMS, после чего они автоматически появляются на карте. Рядом с картой отображается список городов с возможностью фильтрации по типу локации (офис, склад, сервисный центр) и функцией копирования адреса.
04
Раздел «Импортозамещение». Обновили существующий раздел в рамках перехода на новую CMS: переработали его архитектуру и адаптировали под новую систему управления контентом, сохранив привычную для пользователей навигацию, фильтрацию и карточки вендоров.
CI/CD и инфраструктура
•
Для обеспечения стабильной работы и упрощения обновлений мы внедрили полный цикл CI/CD. Исходный код размещен в централизованном репозитории, а сборка и развертывание на stage- и production-окружения выполняются автоматически средствами CI. Stage-окружение доступно только по whitelist IP, production-сервер изолирован во внутреннем контуре клиента.
Результаты
•
К плановой дате релиза мы завершили разработку и передали клиенту полностью обновленный корпоративный сайт.
•
Единая платформа управления. Теперь весь контент — от страниц вендоров до новостей и промо-материалов — управляется через удобную административную панель с визуальным редактором.
•
Успешная миграция. Более 6 400 записей перенесены с MODX на 1С-Битрикс с сохранением структуры, связей и SEO-параметров.
•
Современный стек. Сайт работает на связке Vue. js и 1С-Битрикс, что обеспечивает высокую скорость интерфейса и гибкость в дальнейшем развитии.
•
Интеграции с экосистемой клиента. Настроен обмен данными с B2B-порталом, внедрены сервисы геолокации, аналитики и защита форм от спама.
•
Улучшенный пользовательский опыт. Навигация стала интуитивнее, путь к ключевой информации сократился, а интерфейс адаптирован под все типы устройств.
Заключение
•
Этот проект стал примером того, как можно провести масштабную модернизацию корпоративного сайта, не потеряв накопленный годами контент и поисковые позиции. Мы построили платформу, которая не только решает текущие задачи OCS, но и закладывает технологический фундамент для будущего роста. Благодаря headless-архитектуре и продуманной структуре данных сайт готов к интеграции с новыми сервисами и масштабированию вместе с бизнесом клиента.
Комментарии к статье
Комментарии: 0