Torgplast

Информация о проекте

«Торгпласт» — производитель и поставщик изделий из пенополистирола: утеплителей, дренажных систем, фасадного декора, упаковки и других технических материалов. На момент обращения компания столкнулась с необходимостью обновления сайта: старая версия не отвечала современным требованиям по функциональности, дизайну и удобству для клиентов. Задача стояла амбициозная — создать полноценный интернет-магазин на «1С-Битрикс» с глубокой проработкой каталога, фильтров, карточек товаров и множеством лендингов под разные группы продукции.

Цели создания сайта:

• Запустить интернет-магазин с удобной структурой каталога и быстрыми фильтрами, чтобы клиенты могли легко подбирать товары по техническим параметрам.
• Автоматизировать процесс оформления заказа, интегрировать корзину с учётом оптовых цен и количества, снизить нагрузку на менеджеров.
• Создать серию посадочных страниц (лендингов) для продвижения ключевых продуктовых линеек, с анимациями и сценариями, повышающими конверсию.
• Обеспечить корректную работу всех форм и интерактивных элементов на всех устройствах, включая мобильные.
• Сделать сайт удобным для дальнейшего наполнения контентом и масштабирования каталога силами клиента.

Решение:

Погружение в нишу началось с детального анализа макетов и технического задания. На первом же созвоне мы определили приоритеты: каталог — сердце проекта. Поэтому стартовали с него, а не с главной страницы, чтобы как можно быстрее получить работающий прототип интернет-магазина. Роман, ведущий верстальщик, сразу предложил использовать компонентный подход: выделить общие блоки (хедер, футер, карточки товаров, формы), чтобы в будущем упростить интеграцию и поддержку.

Самой сложной задачей оказался фильтр каталога. В макете он был проработан детально, но стандартный «умный фильтр» Битрикса не давал нужной гибкости для кастомизации. Нам пришлось адаптировать собственную вёрстку под битриксовские компоненты, буквально «вживую» подгоняя HTML и стили. В процессе всплыли проблемы с отображением ползунка цен и выбранных параметров — стандартные скрипты конфликтовали с нашей анимацией. После нескольких созвонов с бэкенд-разработчиком Виктором мы выработали решение: оставили структуру битриксовского фильтра, но полностью переписали внешний вид и добавили кастомную логику для ползунка с поддержкой дробных цен и разрядности. Это позволило сохранить всю функциональность «1С-Битрикс» при идеальном соответствии дизайну.

Работа над карточкой товара тоже потребовала нестандартных подходов. Клиент хотел, чтобы количество товара можно было менять, а цена пересчитывалась в реальном времени без перезагрузки страницы. Мы реализовали это через AJAX-запросы к корзине, но столкнулись с нюансом: если товар ещё не добавлен, запрос на изменение количества не может корректно вернуть цену. Вместе с Виктором мы придумали гибридную схему: когда товар не в корзине — цена пересчитывается фронтендом на основе данных из разметки, а если товар уже добавлен — запрос к корзине возвращает актуальную стоимость. Это обеспечило плавную работу без лишних действий пользователя.

Ещё одним вызовом стала страница оформления заказа. Стандартный компонент выбора города от Битрикса был реализован через `<select>`, что не вписывалось в дизайн и создавало проблемы с адаптивом. Вместо того чтобы переписывать js-логику ядра, мы решили адаптировать вёрстку под существующие скрипты: обернули блок в нужные контейнеры и добавили стили, которые полностью преобразили внешний вид, сохранив функциональность. Для телефонной маски использовали библиотеку IMask, но после AJAX-обновлений корзины маска слетала. Решением стало подключение кастомного обработчика `BX.addCustomEvent(‘onAjaxSuccess’, …)`, который переинициализирует маску после каждого асинхронного запроса.

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

Передача проекта прошла гладко. После финальных правок (кнопки выбора города в корзине, доработка слайдеров на карточке, исправление отступов на мобилках) клиент подтвердил готовность всех страниц. Мы обучили команду «Торгпласт» работе с админкой Битрикса, передали все исходники и документацию по кастомным скриптам.