Адаптивная верстка шаблона сайта 1С-Битрикс

Верстальщик сдал шаблон — на десктопе всё отлично. Открываешь на iPhone 13, и шапка с логотипом перекрывает меню, фильтр каталога вылезает за пределы экрана, а кнопка «Купить» прячется под sticky-баннером. Это не баг верстки в вакууме — это следствие того, что адаптив делался без учёта специфики шаблонной системы Битрикс: вложенных компонентов, подключаемых через $APPLICATION->IncludeComponent(), и того, что часть HTML генерируется PHP, а часть — JavaScript.

Адаптивная верстка шаблона сайта 1С-Битрикс

Как устроен шаблон Битрикс с точки зрения верстки

Шаблон сайта в Битрикс — это папка в /bitrix/templates/<имя_шаблона>/ или /local/templates/<имя_шаблона>/. Точки входа: header.php, footer.php, styles.css, script.js. Компоненты переопределяются в /bitrix/templates/<шаблон>/components/ или /local/templates/<шаблон>/components/.

Адаптив требует работы на двух уровнях:

• Шаблон сайта (header.php, footer.php, общие блоки): навигация, шапка, подвал, сайдбар
• Шаблоны компонентов: у bitrix:catalog.section, bitrix:news.list, bitrix:sale.basket.basket своя разметка в template.php — её тоже нужно адаптировать

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

Подходы к адаптации

Mobile-first — пишем стили для мобильных, расширяем через min-width медиазапросы. Подход предпочтителен для новых шаблонов: меньше переопределений, логичная каскадность.

Desktop-first — добавляем медиазапросы через max-width. Актуально, когда адаптируем существующий шаблон, написанный под десктоп: меньше риска сломать текущий вид.

Брейкпоинты согласуются с дизайном, но типичный набор для Битрикс-проектов: 1280px, 1024px, 768px, 480px, 375px.

Ключевые зоны адаптации

Мобильное меню — компонент bitrix:menu генерирует <ul> с классами. Для мобильного бургер-меню нужно либо переопределить шаблон компонента, либо управлять видимостью через CSS/JS. Важно сохранить доступность: меню должно работать без JavaScript при SSR-кэшировании.

Каталог и фильтр — bitrix:catalog.section с bitrix:catalog.smart.filter на мобильном требует отдельного подхода: фильтр выносится в оверлей или аккордеон, сетка товаров переключается с 3 колонок на 2 и 1.

Формы — bitrix:form.result.new и формы оформления заказа (bitrix:sale.order.ajax) часто имеют многоколоночный layout, который нужно перестроить в одну колонку.

Таблицы с данными — прайс-листы, характеристики товаров: на мобильном заменяются стекированным layout или горизонтальным скроллом с фиксированной первой колонкой.

Кейс: адаптация корпоративного сайта

Сайт строительной компании, шаблон написан в 2019 году, без адаптива. Доля мобильного трафика по данным Метрики — 58%. Задача: полная адаптация без редизайна и без переписывания логики PHP.

Прошли по всем страницам, составили список компонентов и блоков с проблемами. Основная работа сосредоточилась на: главной странице (баннер + блоки услуг), каталоге (фильтр + сетка), странице контактов (карта Яндекс + форма). Параллельно переопределили шаблоны трёх компонентов в /local/templates/. Работа заняла от 5 до 8 рабочих дней.

Тестирование адаптива

Проверяем в Chrome DevTools (device toolbar) — это минимум. Дополнительно: реальные устройства или BrowserStack, проверка touch-событий, проверка кэшированных страниц Битрикс (важно: Битрикс кэширует HTML, убедитесь что адаптивные скрипты не попали в кэш некорректно).

Сроки