Розробка кастомного шаблону сайту 1С-Бітрікс
Стандартні шаблони з Бітрікс.Маркетплейс вирішують 20% реальних задач. Інші 80% — кастом: унікальний дизайн, нестандартна структура сторінок, специфічні вимоги до продуктивності або інтеграції з зовнішніми системами. Розробляти шаблон «поверх» готового маркетплейсного — шлях до технічного боргу: чужі стилі та скрипти конфліктують, оновлення шаблону затирає правки.
Розробка кастомного шаблону сайту 1С-Бітрікс
Структура кастомного шаблону
Кастомний шаблон створюється у /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() підключаються ресурси. Для сучасних проектів зручніше використовувати збирач (Webpack, Vite) з виходом у папку шаблону.
Підключення ресурсів і Asset Pipeline
Бітрікс підтримує два підходи:
Нативний — CUtil::InitJSCore(), $APPLICATION->SetAdditionalCSS('/local/templates/main/css/style.css'), 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
У папці 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 Бітрікс
Терміни
| Обсяг шаблону | Терміни |
|---|---|
| Простий шаблон (до 5 типів сторінок, базові компоненти) | 2–4 тижні |
| Середній шаблон (5–15 типів сторінок, кастомні компоненти) | 4–8 тижнів |
| Складний шаблон (B2B, особистий кабінет, нестандартна логіка) | 8–16 тижнів |