Разработка кастомного шаблона сайта 1С-Битрикс с нуля

Наш опыт показывает: стандартные шаблоны из Битрикс.Маркетплейс решают не более 20% реальных бизнес-задач. Остальные 80% — кастом: уникальный дизайн, нестандартная структура страниц, специфические требования к производительности или интеграции с внешними системами. Разрабатывать шаблон поверх готового маркетплейсного — путь к техническому долгу: чужие стили и скрипты конфликтуют, обновление шаблона затирает правки. Мы за 8+ лет создали более 50 кастомных шаблонов для разных отраслей — от интернет-магазинов до B2B-порталов. Каждый проект мы начинаем с аудита бизнес-требований и подбора оптимальной архитектуры шаблона. Это гарантирует отсутствие переплат за лишний функционал и высокую скорость разработки. Ниже — технические детали, которые помогут вам принять решение.

Почему стоит отказаться от готового шаблона

Готовая тема из Маркетплейса — это компромисс. Вы платите за функционал, который часто не нужен, и получаете код, который сложно адаптировать. Кастомный шаблон пишется под конкретные бизнес-процессы: интеграция с 1С через API, сложные права доступа для дилеров, индивидуальная фискализация по 54-ФЗ. Мы гарантируем, что такой шаблон не потребует переписывания через год. Экономия на поддержке составляет до 30% в сравнении с постоянными доработками готового решения. За 3 года владения кастомный шаблон экономит более 500 000 рублей на сопровождении, а окупаемость разработки наступает через 6 месяцев.

Влияние на производительность

Кастомный шаблон без лишних модулей и стилей обычно легче и быстрее. Мы подключаем только необходимые CSS/JS, используем современные сборщики (Vite, Webpack) с tree-shaking, внедряем тегированное кэширование — это даёт прирост скорости до 40% по сравнению с типовыми решениями. Благодаря управляемому кэшированию через CPHPCache и managed_cache, время загрузки страниц под высокой нагрузкой снижается в 2-3 раза. Мы также оптимизируем header.php и footer.php, которые рендерятся на каждый запрос, минимизируя их вес.

Структура кастомного шаблона

Кастомный шаблон создаётся в /local/templates/<имя_шаблона>/. Использование /local/ — принципиально: эта папка не затрагивается при обновлениях Битрикс. Минимальная структура:

/local/templates/main/
  header.php    — шапка сайта, подключение CSS/JS
  footer.php    — подвал, закрывающие теги
  styles.css    — основные стили (или подключение сборки)
  script.js     — основные скрипты
  .parameters.php — настройки шаблона (необязательно)
  components/   — переопределения шаблонов компонентов
  page_templates/ — шаблоны типов страниц
  images/       — изображения шаблона

В header.php через $APPLICATION->SetAdditionalCSS() и $APPLICATION->AddHeadScript() подключаются ресурсы. Для современных проектов используем сборщик (Vite, Webpack) с выходом в папку шаблона.

Подключение ресурсов через Asset Pipeline

Битрикс поддерживает два подхода. Первый — нативный: CUtil::InitJSCore(), Asset::getInstance()->addJs(). Файлы отдаются напрямую, возможна конкатенация через настройки модуля main. Второй — через сборщик: npm run build генерирует минифицированные бандлы в /local/templates/main/assets/. В header.php подключается итоговый файл. Этот подход предпочтительнее: tree-shaking, PostCSS, современный JS с транспиляцией. Для проектов с Vue или React во фронтенде шаблон Битрикс выступает как shell: рендерит HTML-контейнеры и передаёт данные через <script> с JSON, который собирается из $arResult компонентов.

Типы страниц в шаблоне

В папке page_templates/ хранятся PHP-файлы с разными layout страниц. Например: layout-fullwidth.php (без сайдбара), layout-sidebar.php (с боковой колонкой), layout-landing.php (без шапки и подвала для лендингов). Редактор выбирает тип страницы в административной панели. Это позволяет одним шаблоном сайта покрыть разные структуры страниц без дублирования кода.

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

Производственная компания (наш клиент), Битрикс «Бизнес». Требования: личный кабинет для дилеров с индивидуальными ценами, каталог без публичного доступа, интеграция с 1С через API. Стандартный шаблон не подходил — нужна была кастомная навигация с учётом групп пользователей. Мы разработали шаблон с нуля в /local/templates/b2b/. В header.php — проверка авторизации через $USER->IsAuthorized(), для неавторизованных — редирект на страницу входа. Навигация строится динамически через bitrix:menu с кастомным шаблоном, отображающим пункты меню в зависимости от группы пользователя. Стили — Tailwind CSS через PostCSS, сборка Vite. Итог: шаблон с нуля за 3 недели, включая шаблоны основных компонентов каталога и личного кабинета.

Что нужно учесть при разработке

• Режим правки — при включённой панели управления Битрикс добавляет оверлеи для редактирования контента. Шаблон должен корректно работать с bx-editmode-overlay классами.
• SEO-мета — $APPLICATION->SetTitle(), $APPLICATION->SetKeywords(), $APPLICATION->SetDescription() вызываются в компонентах, шаблон должен выводить их в <head> через соответствующие методы.
• Кэширование — managed_cache и CPHPCache кэшируют вывод компонентов, но не header.php/footer.php — они рендерятся на каждый запрос.
• Безопасность — в шаблоне не должно быть прямых SQL-запросов, все данные — через API Битрикс.

Согласно официальной документации, шаблон в /local/ не затрагивается обновлениями, что подтверждает его долгосрочную стабильность.

Сравнение кастомного и готового шаблонов

Сроки разработки

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

1. Анализ требований — собираем ТЗ, изучаем интеграции, замеряем нагрузки, определяем типы страниц.
2. Проектирование — создаём прототип структуры файлов, макет шаблона, выбираем стек (сборщик, CSS-фреймворк).
3. Реализация — пишем header.php/footer.php, настраиваем Asset Pipeline, создаём page_templates, переопределяем необходимые компоненты.
4. Тестирование — проверяем на всех типах страниц, в разных браузерах, с разными правами доступа.
5. Деплой и документация — выкладываем на боевой сервер, передаём инструкции по доработкам.

Что входит в deliverables

• Полный архив шаблона с файловой структурой.
• Документация по подключению и кастомизации.
• Настроенное кэширование и оптимизация производительности.
• Гарантия корректной работы после обновлений Битрикс.
• Бесплатная консультация по доработкам в течение месяца после сдачи.

Для оценки проекта достаточно описать задачу — мы определим сложность и предложим оптимальное решение. Свяжитесь с нами, чтобы обсудить ваш проект. Мы гарантируем прозрачные сроки и полное соответствие техническому заданию. Опыт более 50 успешно внедрённых шаблонов — ваша страховка от срывов дедлайнов. Получите консультацию прямо сейчас.

Дополнительная информация: концепция шаблонов веб-сайтов описана в статье Википедии. Для углублённого изучения возможностей Битрикс рекомендуем официальную документацию.

Почему вёрстка сайтов на 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 дня после получения макетов.

Сроки

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