Чому верстка сайтів на 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
Типові шаблони, які верстаємо під ключ:
| Компонент | Що робимо |
|---|---|
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% — в 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+ років.