Кастомная верстка шаблонов компонентов 1С-Битрикс под ключ

Задача звучит просто: «поменяй карточку товара». На деле карточка — это шаблон компонента bitrix:catalog.element. Он лежит в /bitrix/components/bitrix/catalog.element/templates/.default/. Трогать его нельзя — изменения пропадут при обновлении. Нужно создавать переопределение: в /local/templates/<шаблон_сайта>/components/ или в папке шаблона сайта. Мы специализируемся на кастомной верстке шаблонов компонентов 1С-Битрикс. У нас за плечами более 80 проектов и 7 лет работы с платформой. Работаем под ключ: от анализа до готового шаблона. Оценим ваш проект за 1 день и предложим оптимальное решение. Кастомный шаблон работает в 2–3 раза быстрее стандартного при реализации сложных UI-элементов, таких как вкладки или фильтры с AJAX-подгрузкой. Бюджет проекта сокращается на 30-50% по сравнению с разработкой собственного компонента.

Порядок переопределения шаблона компонента

Битрикс ищет шаблон компонента в следующем порядке (упрощённо):

1. /local/templates/<шаблон_сайта>/components/<namespace>/<компонент>/<имя_шаблона>/
2. /bitrix/templates/<шаблон_сайта>/components/<namespace>/<компонент>/<имя_шаблона>/
3. /local/components/<namespace>/<компонент>/templates/<имя_шаблона>/
4. /bitrix/components/<namespace>/<компонент>/templates/<имя_шаблона>/

Правильное место для кастомных шаблонов — /local/templates/<шаблон>/components/ или /local/components/. Это гарантирует сохранность при обновлении ядра. Подробнее о правилах переопределения читайте в официальной документации.

Минимальный состав папки шаблона: template.php (обязательно), style.css и script.js (подключаются автоматически).

Какие компоненты чаще всего требуют кастомной верстки?

• bitrix:news.list / bitrix:news.detail — новости, блог, портфолио. В $arResult['ITEMS'] — массив элементов с полями и свойствами инфоблока.
• bitrix:catalog.element / bitrix:catalog.section — карточка товара и страница раздела каталога. $arResult['ELEMENT'] содержит данные товара, $arResult['OFFERS'] — торговые предложения.
• bitrix:form.result.new — веб-форма. Шаблон содержит HTML формы с полями из $arResult['FIELDS'].
• bitrix:main.include — подключение статичных областей.

Из нашей практики: шаблон карточки товара с вкладками

Интернет-магазин медтехники. Стандартный шаблон bitrix:catalog.element выводил описание, характеристики и документы единым текстовым блоком. Задача: разбить на вкладки — «Описание», «Характеристики», «Документы» (PDF-файлы из свойства инфоблока типа «Файл»).

Создали переопределение в /local/templates/main/components/bitrix/catalog.element/detail/template.php. В шаблоне: вкладки на чистом CSS (:target-селекторы без JS-зависимости), характеристики — из $arResult['ELEMENT']['DISPLAY_PROPERTIES'], документы — из свойства с проверкой на непустое значение. Кэширование компонента не трогали — шаблон работает с уже подготовленным $arResult.

Что доступно внутри template.php

В template.php автоматически доступны:

• $arResult — данные, подготовленные компонентом (структура зависит от конкретного компонента)
• $arParams — параметры, переданные при вызове
• $APPLICATION, $USER, $DB — глобальные объекты Битрикс
• $this — объект компонента (CBitrixComponent), через который доступны методы типа $this->GetPath()

Перед версткой обязательно изучаем структуру $arResult — через документацию или var_dump() на этапе разработки. Типичный пример: чтобы вывести свойство "Цвет", нужно получить $arResult['DISPLAY_PROPERTIES']['COLOR']['VALUE']. Используем ORM Битрикс D7 для выборки данных, если компонент не предоставляет нужные поля.

Как кастомная верстка ускоряет разработку?

Мы не просто верстаем шаблон — анализируем бизнес-логику и предлагаем оптимальную структуру. В работе используем:

• PHP 8.1+, инфоблоки v2.0, ORM
• Тегированное кэширование для снижения нагрузки на сервер до 70%
• Интеграцию с 1С, платёжными системами, СДЭК по необходимости

По сравнению с разработкой собственного компонента, кастомизация шаблона позволяет сэкономить до 50% трудозатрат. Переопределение в /local/ гарантирует сохранность изменений при обновлении ядра.

Почему переопределение в /local/ — это безопасно?

Изменения в /bitrix/ перезаписываются при обновлении платформы. Папка /local/ не затрагивается обновлениями, все кастомные шаблоны остаются нетронутыми. Кроме того, при переезде на другой сервер достаточно перенести папку /local/ — все настройки и шаблоны сохраняются. Это стандарт для профессиональной разработки на Битрикс.

Типичные ошибки при переопределении шаблонов

• Редактирование шаблона в /bitrix/ — изменения пропадают после обновления.
• Забывают выключить кэш компонента при отладке — результат не обновляется.
• Путают $arResult['ITEMS'] и $arResult['ELEMENTS'] — структура зависит от компонента.
• Не проверяют наличие шаблона для мобильной версии — адаптивность часто упускают.

Что входит в работу

Сроки ориентировочно

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

Подробнее о платформе 1С-Битрикс читайте на Wikipedia.

Почему вёрстка сайтов на 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

Типовые шаблоны, которые верстаем под ключ:

Кэширование: почему оно ломается и как чиним?

Компонентное кэширование в Битрикс ломается одной ошибкой: вывели имя пользователя внутри кэшированного каталога — все видят одно имя. Решение — 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+ лет — получите консультацию по вашему проекту до начала работ.

Процесс работы:

1. Анализ макетов и текущего проекта — выявляем компоненты для переработки
2. Проектирование структуры — разбиваем страницу на BEM-блоки
3. Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
4. Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
5. Деплой — стейджинг, приёмка, продакшен

На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.

Сроки

После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.