Інтеграція верстки в шаблон 1С-Бітрікс
Верстальник здав статичний HTML з CSS та JS. Тепер потрібно перетворити його на робочий шаблон Бітрікс, де шапка — це header.php з динамічним меню через bitrix:menu, блок новин — компонент bitrix:news.list, а форма зворотного зв'язку — bitrix:form.result.new. Це не механічне копіювання HTML: інтеграція вимагає розуміння того, як Бітрікс керує даними, кешем і рендерингом.
Інтеграція верстки в шаблон 1С-Бітрікс
Що таке інтеграція верстки
Інтеграція — це переведення статичного HTML/CSS/JS у динамічну систему Бітрікс. На вході: файли верстки (HTML, CSS, JS, зображення). На виході: повноцінний шаблон сайту у /local/templates/, де статичні блоки замінені на компоненти, а дані надходять з бази.
Це окрема технічна задача, яка нерідко займає стільки ж часу, скільки сама верстка — особливо якщо верстальник не враховував особливості Бітрікс.
Етапи інтеграції
Розбивка HTML на шаблон. Статичний HTML ділиться на header.php (від <html> до кінця шапки), footer.php (підвал до </html>) та компонентні зони. CSS та JS переносяться у папку шаблону, шляхи виправляються з урахуванням SITE_TEMPLATE_PATH.
Підключення ресурсів. У header.php ресурси підключаються через $APPLICATION->SetAdditionalCSS() або напряму у <head>. JS краще розміщувати перед </body> у footer.php. Якщо верстальник використовував npm-пакети — потрібна збірка.
Заміна статичних блоків на компоненти. Навігація — bitrix:menu з перевизначеним шаблоном. Слайдер на головній — частіше bitrix:main.include з файлом-областю або кастомний компонент на основі інфоблока. Список новин — bitrix:news.list. Форма — bitrix:form.result.new.
Перенесення стилів компонентів. У стандартних компонентів є власні CSS, які можуть конфліктувати з версткою. Рішення: або підключати style.css компонента та перевизначати потрібні правила, або створювати шаблон компонента з нуля, без підключення стандартних стилів.
Поширені проблеми при інтеграції
Шляхи до зображень і файлів — у статичній верстці відносні шляхи (../images/logo.png), у Бітрікс потрібно використовувати SITE_TEMPLATE_PATH або абсолютні шляхи. Інакше зображення не відображаються на сторінках не в корені.
Конфлікти jQuery — верстка часто тягне власну jQuery, Бітрікс підключає свою. Рішення: прибрати jQuery верстки, використовувати BX.ready() замість $(document).ready(), або явно викликати jQuery.noConflict().
Кирилиця в ID і класах — іноді зустрічається у верстці під Бітрікс. Бітрікс додає власні класи типу bx- — вони не повинні конфліктувати з іменами у верстці.
Панель управління — при авторизованому адміністраторі Бітрікс додає смугу у верхній частині сторінки (~45px). Якщо верстка має position: fixed шапку з розрахунком від верху — потрібно врахувати клас bitrix-admin на <html>.
Кейс: інтеграція лендингу в шаблон
Маркетингове агентство розробило верстку лендингу для клієнта: 8 секцій, кастомний слайдер, форма з багатокроковим заповненням, анімації на Intersection Observer. Клієнт захотів редагувати текст через адміністративну панель Бітрікс.
Розділили лендинг: статичні секції з текстом — через bitrix:main.include з editable-областями (щоб редактор правив текст без коду), слайдер — інфоблок + кастомний шаблон bitrix:news.list, форма — bitrix:form.result.new з перевизначеним шаблоном, що зберігає багатокрокову логіку на JS. Анімації не чіпали — вони у script.js шаблону, працюють незалежно. Інтеграція зайняла 3 робочих дні.
Терміни
| Тип верстки | Терміни |
|---|---|
| Простий лендинг (1–3 сторінки, базові блоки) | 1–3 дні |
| Корпоративний сайт (5–20 сторінок, стандартні компоненти) | 1–2 тижні |
| Інтернет-магазин (каталог, кошик, оформлення замовлення) | 2–5 тижнів |