Главная
»
Блог
»
Переработали фронтенд сайта лабораторного оборудования

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

Айрат Рахимзянов | 13 июня 2025

Время чтения 12 минут

Чтобы данный кейс увидел свет, ушло примерно полгода. Потому что работа над проектом велась постоянно и возникали новые идеи, которые снова приходилось добавлять в ТЗ. По этой причине работы никак не получалось закончить. Но мы все же сделали это. Спасибо нашему программисту и контент-менеджеру.

О проекте

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

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

Читайте также другие технические кейсы:

Цели и задачи

Привести ключевые элементы интерфейса к единому стилю и современным UX-паттернам.
Повысить информативность и удобство карточек товаров.
Обеспечить корректную работу на мобильных устройствах.
Интегрировать функционал «заказать обратный звонок» с CRM.

Технологии и инструменты

CMS: 1C-Bitrix
Верстка: HTML5, CSS3 (Sass, BEM-методология), CSS Grid, Flexbox
Скрипты: JavaScript (ES6), jQuery
Сборка: Webpack, Babel
Оптимизация: WebP, Lazy-load, критический CSS
API: Google Maps JS API, REST-интеграция с CRM
Отладка: BrowserStack (кроссбраузерность), Lighthouse (performance)

Подробное описание работ и скриншоты

1. Обновление шапки (header)

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

Вынесли логотип и навигацию в отдельные контейнеры, все элементы стали более крупными.
Добавлена кнопка “заказать звонок” интегрируемая с CRM.
Обновили иконки соцсетей и сменил цветовую схему кнопок.

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

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

2. Обновление футера (footer)

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

Добавили блок с логотипом, названием и кратким описанием компании.
Внесли контактную информацию: полный адрес и режим работы.
Перестроили сетку ссылок на три колонки через CSS Grid.
Обновили стили иконок соц. сетей, выровняли по базовой линии.

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

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

3. Карточка товара

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

Внедрили «хлебные крошки» через <ul class="breadcrumb"> и микроразметку Schema.org.
Добавили блок рейтинга: динамические звёзды на основе данных API.
Вывели бренд товара: запрос к справочнику брендов.
Показали статус наличия: зелёная метка «В наличии», «Под заказ»
Добавили артикул.
Внедрили модуль отзывов с AJAX-подгрузкой и возможностью модерации и возможностью комментировать всем желающим.

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

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

4. Главная страница

Что сделано:

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

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

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

5. Мобильное меню

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

Исправили баги открытия/закрытия event delegation, e.stopPropagation().
Убрали конфликт с плагином слайдера.
Добавили доступность: фокусировка на первом элементе.

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

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

6. Сетка услуг

Что сделано:

Реализовали одинаковые карточки услуг с иконками через <picture> и CSS Grid.
Добавили hover-эффект: мягкое затемнение и смещение текстового блока.
Обеспечили плавное выравнивание на всех разрешениях.

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

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

7. Функция заказа обратного звонка

Что сделано:

Добавили modal-окно с формой (имя, телефон).
Реализовали AJAX-отправку на сервер и всплывающее окно «Спасибо».
Интеграция формы с CRM.

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

8. Интеграция с CRM

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

Через REST API при каждом запросе «заказать звонок» создаётся лид в CRM.
Добавлено логирование запросов и повторную попытку при ошибке 5xx.
Настроили уведомления менеджерам (email, веб-хуки).

Лид в CRM:

9. Расширение ширины контента

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

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

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

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

10. Страница «Контакты»

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

Интегрировали Яндекс Карты.
Выравняли форму и список офисов по единой сетке.
Обеспечили адаптивность карты.

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

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

11. Корректировки на странице поиска

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

Исправили выравнивание списка результатов через Flexbox.
Обновили кнопку «Найти ещё».

12. Таблица товаров и доступность

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

Исправили логику вывода статуса в колонке «Доступность» (JS→PHP).
Обновили стили: .status--available, .status--preorder.
Добавили условие: скрывать столбец, если товаров нет.

13. Вывод валюты в таблицах

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

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

14. Страница рассылки

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

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

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

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

Сложности и решения

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

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

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

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

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

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

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

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

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

Вывод

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