Интеграция верстки в шаблон 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 недель |