Переработали фронтенд сайта промышленного и лабораторного оборудования — сайт стал удобнее

Клиент: дистрибьютор промышленного и лабораторного оборудования (B2B, Москва).

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

В рамках проекта было решено:

• переработать структуру и внешний вид ключевых элементов интерфейса (header, footer, страницы);

• унифицировать стили и упростить DOM-структуру сайта;

• улучшить карточки товаров: добавить бренд, артикул, статус наличия, рейтинг и отзывы;

• внедрить «хлебные крошки» и микроразметку;

• исправить ошибки и доработать мобильное меню;

• реализовать адаптивную сетку и корректное отображение на всех устройствах;

• улучшить таблицы товаров (наличие, валюта, логика отображения);

• доработать страницу поиска и контактов;

• добавить функцию «заказать обратный звонок» (modal-форма с AJAX-отправкой);

• интегрировать формы с CRM через REST API;

• настроить автоматическое создание лидов и уведомления менеджеров;

• реализовать обработку ошибок и повторные запросы при сбоях API;

• оптимизировать загрузку сайта (WebP, lazy-load, критический CSS).

Что было сделано:

Вынесли логотип и навигацию в отдельные контейнеры, все элементы стали более крупными.

Добавлена кнопка “заказать звонок” интегрируемая с CRM.

Обновили иконки соцсетей и сменил цветовую схему кнопок.

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

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

Что было сделано:

Добавили блок с логотипом, названием и кратким описанием компании.

Внесли контактную информацию: полный адрес и режим работы.

Перестроили сетку ссылок на три колонки через CSS Grid.

Обновили стили иконок соц. сетей, выровняли по базовой линии.

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

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

Что было сделано:

Внедрили «хлебные крошки» через

Добавили блок рейтинга: динамические звёзды на основе данных API.

Вывели бренд товара: запрос к справочнику брендов.

Показали статус наличия: зелёная метка «В наличии», «Под заказ»

Добавили артикул.

Внедрили модуль отзывов с AJAX-подгрузкой и возможностью модерации и возможностью комментировать всем желающим.

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

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

Что сделано:

Унифицировали отступы.

Упростили DOM-структуру, убрали лишние “обёртки”.

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

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

Что было сделано:

Исправили баги открытия/закрытия event delegation, e.stopPropagation().

Убрали конфликт с плагином слайдера.

Добавили доступность: фокусировка на первом элементе.

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

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

Что сделано:

Реализовали одинаковые карточки услуг с иконками через и CSS Grid.

Добавили hover-эффект: мягкое затемнение и смещение текстового блока.

Обеспечили плавное выравнивание на всех разрешениях.

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

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

Что сделано:

Добавили modal-окно с формой (имя, телефон).

Реализовали AJAX-отправку на сервер и всплывающее окно «Спасибо».

Интеграция формы с CRM.

Форма «Заказать звонок» сейчас:

Что было сделано:

Через REST API при каждом запросе «заказать звонок» создаётся лид в CRM.

Добавлено логирование запросов и повторную попытку при ошибке 5xx.

Настроили уведомления менеджерам (email, веб-хуки).

Лид в CRM:

Что было сделано:

Обновили media-запросы для точек перелома.

Проверили совместимость компонентов: таблицы, слайдеры, формы.

До расширения контентной зоны:

После расширения контентной зоны:

Что было сделано:

Интегрировали Яндекс Карты.

Выравняли форму и список офисов по единой сетке.

Обеспечили адаптивность карты.

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

После расширения контентной зоны:

Что было сделано:

- Исправили выравнивание списка результатов через Flexbox.

- Обновили кнопку «Найти ещё».

Что было сделано:

- Исправили логику вывода статуса в колонке «Доступность» (JS→PHP).

- Обновили стили: .status--available, .status--preorder.

- Добавили условие: скрывать столбец, если товаров нет.

Что было сделано:

- Добавили поддержку нескольких валют (₽, €, $).

Что было сделано:

- Исправлено отображение формы в соответствии с дизайном сайта.

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

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

1. Наследуемые стили Bitrix-шаблона

Проблема: конфликт версий Bootstrap и кастомных стилей.

Решение: изолировали новые модули под BEM-неймспейс, подключили критический CSS.

2. Нестабильная документация CRM-API

Проблема: ответы 500 при пиковых нагрузках.

Решение: реализовали повторные запросы с экспоненциальным «бек-офом» и логирование.

3. Кроссбраузерность в IE11

Проблема: CSS Grid не работал в старом движке.

Решение: подключили css-grid-polyfill и дополнительные классы-фиксы.

Несмотря на умеренные визуальные изменения, весь фронтенд был детально переработан — от структуры и верстки до интеграции ключевых бизнес-процессов. Это позволило добиться значительного роста основных метрик и улучшить удобство для B2B-аудитории.