Адаптивна верстка шаблону сайту 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, переконайтеся, що адаптивні скрипти не потрапили в кеш некоректно).

Терміни