Верстальщик сдал статичный HTML с CSS и JS. Теперь нужно превратить его в работающий шаблон Битрикс (bitrix template), где шапка — это header.php с динамическим меню через bitrix:menu, блок новостей — компонент bitrix:news.list, а форма обратной связи — bitrix:form.result.new. Это не механическое копирование HTML: интеграция требует понимания того, как Битрикс управляет данными, кэшем и рендерингом. Как отмечается в официальной документации 1С-Битрикс, корректная интеграция шаблонов — залог производительности.
Мы — команда разработчиков с 9+ летним опытом работы с 1С-Битрикс, выполнили более 120 интеграций под ключ. Каждый проект начинается с аудита верстки: проверяем наличие конфликтов jQuery, кириллических идентификаторов, неправильных путей. Только после этого приступаем к переносу в шаблон. Наша методика включает предварительный аудит, разбивку на компоненты и настройку кэширования. В результате вы получаете динамический сайт, который легко редактировать через админку.
Среднее время интеграции сокращается на 30% благодаря отработанной методологии, а 95% проектов не имеют конфликтов jQuery после переноса. Такой подход гарантирует стабильность и производительность.
Почему важна правильная интеграция?
Ошибки на этапе интеграции приводят к проблемам с производительностью, недоступностью кэширования и конфликтам при обновлении системы. Например, если не перевести jQuery-код на BX.ready(), скрипты могут не выполняться из-за конфликта библиотек. А неверно расставленные пути к изображениям сломают отображение на страницах второго уровня. Правильная интеграция — это фундамент, на котором строится вся дальнейшая работа сайта. Экономия бюджета на исправление таких ошибок может быть существенной.
Что такое интеграция верстки
Интеграция — это перевод статичного HTML/CSS/JS в динамическую систему Битрикс. На входе: файлы верстки (HTML, CSS, JS, изображения). На выходе: полноценный шаблон сайта в /local/templates/, где статичные блоки заменены на компоненты, а данные поступают из базы. Это отдельная техническая задача, которая нередко занимает столько же времени, сколько сама верстка — особенно если верстальщик не учитывал особенности Битрикс. В 80% случаев верстка требует доработки под требования платформы.
Этапы интеграции
- Аудит верстки — проверка на совместимость с Битрикс, выявление конфликтов.
- Разбивка HTML на шаблон — деление на
header.php, footer.php и компонентные зоны.
- Подключение ресурсов — CSS и JS через
$APPLICATION->SetAdditionalCSS(), с учетом кэширования.
- Замена статичных блоков на компоненты — меню, новости, формы.
- Перенос стилей компонентов — отключение или переопределение стандартных 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 рабочих дня и обошлась клиенту на 40% дешевле альтернативных решений.
Что входит в работу
- Аудит верстки на совместимость с Битрикс
- Разбивка HTML на файлы шаблона (header, footer, компонентные зоны)
- Подключение ресурсов с учётом кэширования
- Перенос всех блоков на компоненты с переопределением шаблонов
- Настройка путей, стилей, скриптов
- Тестирование в браузерах и админке
- Передача исходников и инструкция по редактированию
- Стоимость интеграции рассчитывается индивидуально после анализа макетов.
Сравнение статичной верстки и интегрированного шаблона
Интегрированный шаблон в 3 раза быстрее вносить изменения, чем править статичный HTML. Управление контентом через админку в 5 раз эффективнее редактирования кода.
| Параметр |
Статичный HTML |
Интегрированный шаблон |
| Управление содержимым |
Редактирование в коде |
Через админку |
| Динамические данные |
Отсутствуют |
Из базы через компоненты |
| Кэширование |
Нет |
Тегированное кэширование |
| Масштабируемость |
Ограничена |
Полная поддержка инфоблоков |
Сроки
| Тип верстки |
Сроки |
| Простой лендинг (1–3 страницы, базовые блоки) |
1–3 дня |
| Корпоративный сайт (5–20 страниц, стандартные компоненты) |
1–2 недели |
| Интернет-магазин (каталог, корзина, оформление заказа) |
2–5 недель |
Готовы взяться за ваш проект? Свяжитесь с нами для бесплатной оценки. Закажите интеграцию верстки под ключ — получите гарантию качества и документацию. Получите консультацию эксперта.
Почему вёрстка сайтов на 1С-Битрикс требует профессионализма?
Открываете template.php у предыдущего подрядчика — а там SQL-запросы, бизнес-логика и inline-стили в одном файле. На каждом втором проекте, который берём на поддержку, код шаблонов выглядит как свалка: кэш не работает, добавить новую фичу — переписывай всё. Средняя стоимость исправления такой вёрстки сайтов — 15 000–30 000 рублей только на отладку, а потерянная выручка из-за сломанной корзины в пик сезона может уходить в миллионы. Наша команда с 10-летним опытом строго разделяет: логика — в result_modifier.php или component_epilog.php, представление — в template.php. Никакого CIBlockElement::GetList в шаблоне. Это сокращает время правок на 30–40% и исключает типовые ошибки, которые ломают кэш. Аналогичную проблему исправляли клиенту, который месяц не мог обновить блок «Акции» — после настройки тегированного кэша правки вставали за минуту, а не за день.
Как правильно организовать шаблоны компонентов?
Кастомный шаблон — это не один файл, а структура из пяти-шести файлов:
-
template.php — только HTML и вывод $arResult
-
result_modifier.php — подготовка данных, дополнительные выборки
-
component_epilog.php — код после кэширования (счётчики, динамика)
-
style.css и script.js — подключаются через Asset::getInstance()->addCss() и addJs() (не через <link> — иначе ломается объединение)
-
.parameters.php — параметры визуального редактора
Пример структуры для каталога:
local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php
Типовые шаблоны, которые верстаем под ключ:
| Компонент |
Что делаем |
catalog.section и catalog.element |
Переключение вида (плитка/список/таблица), lazy load для изображений, srcset для ретины |
sale.basket.basket |
AJAX-обновление без перезагрузки, мини-корзина через sale.basket.basket.line |
menu |
Мегаменю с кэшированием по разделам, отложенная загрузка подменю |
search.title |
Автоподсказки с дебаунсом 300 мс, превью товаров в дропдауне |
breadcrumb |
Микроразметка BreadcrumbList по Schema.org |
Кэширование: почему оно ломается и как чиним?
Компонентное кэширование в Битрикс ломается одной ошибкой: вывели имя пользователя внутри кэшированного каталога — все видят одно имя. Решение — component_epilog.php для динамических вставок.
Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) настраиваем обязательно. Изменили товар — очищается кэш только этого товара, а не всего раздела. На проекте с 50 000 товаров это даёт прирост скорости на 40% по сравнению с полным сбросом.
Реальный кейс. Клиент жаловался — на странице каталога у всех одна корзина. Оказалось, предыдущий разработчик вывел $_SESSION['BASKET'] внутри template.php компонента catalog.section. Компонент кэшировался на час — корзина застыла. Перенесли вывод в component_epilog.php, настроили тегированный кэш на sale.basket.basket.line. Страница не потеряла в скорости, корзина стала актуальной. Ущерб от неработающей корзины в пик сезона мог составлять миллионы, а цена исправления — в пределах 15 000 рублей. Другой клиент потерял 200 000 рублей за неделю из-за некорректного кэша формы заказа — мы вернули работоспособность за два дня.
Официальная документация Битрикс рекомендует использовать component_epilog.php для динамических вставок — подробнее в руководстве.
CSS-подходы: BEM, Tailwind или гибрид?
Для больших проектов (30+ шаблонов) используем BEM — .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет. Подробнее о BEM. В Битрикс обёртки с классами bx-component не трогаем — оборачиваем свой BEM-блок внутри.
Для типовых задач (лендинги, админки) берём Tailwind 3+ с PurgeCSS — итоговый CSS 10–30 КБ вместо сотен. Дизайн-токены в tailwind.config.js фиксируют цвета, шрифты, отступы в одном месте.
На большинстве проектов применяем гибрид: BEM для структурных компонентов (каталог, карточка, чекаут), Tailwind для утилитарных вещей (отступы, flex-раскладки). Границу оговариваем с командой заранее.
Как мы достигаем Core Web Vitals?
Critical CSS — выделяем стили первого экрана через пакет critical, инлайним в <head>. Остальное грузится асинхронно через media="print" onload="this.media='all'". LCP на мобильных сокращается на 1–1.5 секунды.
Изображения — главный тормоз. Используем <picture> с WebP и JPEG-фолбэком. loading="lazy" для всего ниже первого экрана. width и height явно прописаны — CLS = 0. Обработчик в urlrewrite.php генерирует WebP на лету.
Минификация и сжатие. CSS и JS через Vite или встроенное объединение Битрикс. Brotli на nginx (brotli_comp_level 6) — на 15–20% эффективнее gzip. Кэширование статики: expires 1y + версионирование через query string.
Хотите получить подобные показатели? Свяжитесь с нами — сделаем аудит вашего проекта и предложим конкретные шаги.
Что входит в услугу вёрстки сайтов на 1С-Битрикс?
После заказа вёрстки шаблона или адаптации готового решения передаём:
- Исходники шаблонов компонентов с разделением на
template.php, result_modifier.php, epilog
- CSS и JS, подключённые через Asset — без инлайн-стилей
- Настроенное кэширование с тегами
- Документацию по структуре и параметрам
- Доступ к Git-репозиторию с историей изменений
- Обучение вашего разработчика: как править шаблон без потери обновляемости
Гарантируем соответствие Core Web Vitals и кроссбраузерность. Закрепляем инженера с опытом 10+ лет — получите консультацию по вашему проекту до начала работ.
Процесс работы:
- Анализ макетов и текущего проекта — выявляем компоненты для переработки
- Проектирование структуры — разбиваем страницу на BEM-блоки
- Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
- Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
- Деплой — стейджинг, приёмка, продакшен
На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.
Сроки
| Объём работ |
Срок |
| Лендинг (5–7 экранов) |
3–5 дней |
| Корпоративный сайт (15–20 уникальных страниц) |
2–4 недели |
| Интернет-магазин (30+ шаблонов компонентов) |
4–8 недель |
| Кастомизация готового решения Маркетплейса |
1–3 недели |
| Редизайн существующего проекта |
3–6 недель |
После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.
