Как мы полностью переработали фронтенд B2B-сайта промышленного оборудования и сделали его удобнее для инженеров и закупщиков

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

О проекте

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

Сайт: vilitek.ru
Аудитория: B2B-покупатели, инженеры, специалисты по снабжению
Регион: Москва

Какие задачи нужно было решить

Перед началом работ определили несколько ключевых направлений:

1. привести интерфейс к единому современному стилю;
2. сделать карточки товаров более информативными и удобными;
3. обеспечить корректную работу сайта на мобильных устройствах;
4. интегрировать форму заказа обратного звонка с CRM.

Технологии проекта

1. Переработали шапку сайта

Шапка — один из самых важных элементов сайта, поэтому начали именно с неё.

Что изменили

1. Разделили логотип и навигацию на отдельные контейнеры.
2. Сделали элементы меню визуально крупнее и удобнее.
3. Добавили кнопку «Заказать звонок», которая связана с CRM.
4. Обновили оформление кнопок и иконок социальных сетей.

До обновления:

После обновления:

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

2. Обновили футер

Нижняя часть сайта тоже требовала переработки: информации было много, но воспринималась она тяжело.

Что сделали

1. Добавили блок с логотипом и кратким описанием компании.
2. Разместили полный адрес и режим работы.
3. Перестроили ссылки в три колонки с помощью CSS Grid.
4. Привели иконки социальных сетей к единому стилю и выровняли их по базовой линии.

До обновления:

После обновления:

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

3. Сделали карточку товара информативнее

Для B2B-аудитории карточка товара — основной источник информации перед отправкой заявки.

Какие изменения внесли

1. Добавили хлебные крошки с микроразметкой Schema.org.
2. Реализовали блок рейтинга с динамической подгрузкой данных через API.
3. Отобразили бренд товара через справочник брендов.
4. Добавили статус наличия: «В наличии» или «Под заказ».
5. Вывели артикул.
6. Подключили модуль отзывов с AJAX-подгрузкой, модерацией и возможностью оставлять комментарии.

До обновления:

После обновления:

Карточка стала содержать больше полезной информации без перегрузки интерфейса.

4. Привели главную страницу к единому стилю

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

Что сделали

1. Унифицировали систему отступов.
2. Упростили DOM-структуру.
3. Убрали лишние вложенные контейнеры, которые усложняли поддержку верстки.

До обновления:

После обновления:

Страница стала легче как визуально, так и технически.

5. Исправили мобильное меню

На мобильных устройствах меню работало нестабильно и конфликтовало с другими компонентами сайта.

Что изменили

1. Исправили ошибки открытия и закрытия меню через корректную обработку событий.
2. Устранили конфликт со слайдером.
3. Добавили поддержку доступности: при открытии меню фокус автоматически переходит на первый элемент.

До исправления:

После обновления:

В результате меню стало работать предсказуемо на разных устройствах.

6. Обновили сетку услуг

Раздел услуг привели к единому визуальному шаблону.

Что реализовали

1. Сделали одинаковые карточки услуг с использованием CSS Grid.
2. Добавили изображения через тег picture.
3. Настроили плавный hover-эффект с затемнением и смещением текста.
4. Добились корректного выравнивания карточек на всех разрешениях экрана.

До обновления:

После обновления:

Теперь раздел выглядит целостно и масштабируется без проблем.

7. Добавили полноценную форму заказа обратного звонка

Ранее сценарий обратной связи был неудобным и не интегрировался с внутренними процессами компании.

Что сделали

1. Добавили модальное окно с полями имени и телефона.
2. Реализовали AJAX-отправку формы без перезагрузки страницы.
3. После успешной отправки показывается окно с благодарностью.
4. Настроили передачу данных в CRM.

Форма «Заказать звонок»:

После отправки:

Это сократило количество действий пользователя при обращении.

8. Интегрировали форму с CRM

Следующий этап — автоматизация обработки заявок.

Что реализовали

1. При каждом запросе создаётся лид через REST API.
2. Добавили логирование всех запросов.
3. Настроили повторную отправку при ошибках сервера уровня 5xx.
4. Подключили уведомления менеджерам по электронной почте и через веб-хуки.

Лид в CRM:

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

9. Расширили рабочую область сайта

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

Что изменили

1. Пересмотрели media-запросы и точки перелома.
2. Увеличили ширину основного контейнера.
3. Проверили отображение таблиц, форм и слайдеров после изменения сетки.

До расширения:

После расширения:

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

10. Переработали страницу «Контакты»

Страница контактов стала более функциональной и адаптивной.

Что сделали

1. Интегрировали Яндекс Карты.
2. Разместили форму обратной связи и список офисов в единой сетке.
3. Адаптировали карту для мобильных устройств.

До обновления:

После обновления:

Пользователям стало проще находить нужный офис и отправлять запрос.

11. Доработали страницу поиска

Поиск по каталогу тоже получил несколько важных улучшений.

Что исправили

1. Выровняли список результатов с помощью Flexbox.
2. Обновили оформление кнопки «Найти ещё».

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

12. Исправили отображение доступности товаров

В каталоге была переработана логика отображения наличия продукции.

Что сделали

1. Перенесли часть логики определения статуса из JavaScript в PHP.
2. Добавили отдельные стили для статусов наличия и предзаказа.
3. Настроили автоматическое скрытие столбца «Доступность», если для товаров нет соответствующих данных.

Это позволило избежать пустых колонок и сделать таблицы чище.

13. Добавили поддержку нескольких валют

На страницах с таблицами появилась возможность отображать цены в разных валютах.

Что изменили

Поддержали вывод стоимости в:

1. рублях;
2. евро;
3. долларах.

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

14. Обновили страницу подписки на рассылку

Форма подписки больше не выбивается из общего оформления сайта.

Что сделали

1. Привели внешний вид формы к актуальному дизайну проекта.
2. Исправили отображение элементов на разных устройствах.

До обновления:

После обновления:

С какими техническими сложностями столкнулись

1. Конфликт наследуемых стилей Битрикс

Проблема. Старый шаблон использовал несколько версий Bootstrap одновременно, из-за чего новые стили конфликтовали с существующими.

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

2. Нестабильная работа CRM API

Проблема. Во время пиковых нагрузок API CRM периодически возвращал ошибки 500.

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

3. Поддержка Internet Explorer 11

Проблема. CSS Grid некорректно работал в старом браузере.

Решение. Подключили полифилл для CSS Grid и дополнительные классы-фиксы для совместимости.

Итоги проекта

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

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