Кастомна верстка шаблонів компонентів 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-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в 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% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами 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+ років.