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

Наша компанія займається розробкою, підтримкою та обслуговуванням рішень на Бітрікс та Бітрікс24 будь-якої складності. Від простих односторінкових сайтів до складних інтернет-магазинів, CRM систем з інтеграцією 1С та телефонії. Досвід розробників підтверджено сертифікатами від вендора.
Послуги, які ми пропонуємо
Показано 1 з 1Усі 1626 послуг
Розробка кастомного шаблону сайту 1С-Бітрікс з нуля
Простий
~2-3 дні
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1357
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    943
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Розробка на базі Бітрікс, Бітрікс24, 1С для компанії Development of an Online
    693
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Розробка на базі 1С Підприємство для компанії МИРСАНБЕЛ
    829
  • image_crm_dolbimby_434_0.webp
    Розробка сайту на CRM Бітрікс24 для компанії DOLBIMBY
    731
  • image_crm_technotorgcomplex_453_0.webp
    Розробка на базі Бітрікс24 для компанії ТЕХНОТОРГКОМПЛЕКС
    1074

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

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

Чому варто відмовитися від готового шаблону?

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

Вплив на продуктивність

Кастомний шаблон без зайвих модулів і стилів зазвичай легший і швидший. В середньому він на 40% легше готового, а швидкість завантаження зростає на 40%. Ми підключаємо лише необхідні 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) з виходом у папку шаблону.

Детальніше про підключення ресурсів

Бітрікс підтримує два підходи. Перший — нативний: 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 (без шапки та підвалу для лендінгів). Редактор вибирає тип сторінки в адміністративній панелі. Це дозволяє одним шаблоном сайту покрити різні структури сторінок без дублювання коду.

Що потрібно врахувати при розробці

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

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

Практичний приклад: B2B-портал

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

Скільки коштує кастомний шаблон і як довго триває розробка?

Порівняння кастомного та готового шаблонів

Критерій Кастомний шаблон Готовий шаблон
Швидкість завантаження Висока (чистий код, мінімальний CSS/JS) — на 40% швидше Середня (багато зайвих стилів і скриптів)
Адаптація під бізнес-логіку Повна Обмежена
Оновлення Бітрікс Не зачіпається Може скидати правки
Вартість володіння (3 роки) Нижча на 30% за рахунок відсутності доробок Вища через постійні кастомізації

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

Обсяг шаблону Строки
Простий шаблон (до 5 типів сторінок, базові компоненти) 2–4 тижні
Середній шаблон (5–15 типів сторінок, кастомні компоненти) 4–8 тижнів
Складний шаблон (B2B, особистий кабінет, нестандартна логіка) 8–16 тижнів

Процес роботи

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

Що входить у deliverables

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

Для оцінки проекту достатньо описати задачу — ми визначимо складність і запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб обговорити ваш проект. Ми гарантуємо прозорі строки та повну відповідність технічному завданню. Досвід понад 50 успішно впроваджених шаблонів — ваша страховка від зривів дедлайнів. Отримайте консультацію прямо зараз.

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

Чому верстка сайтів на 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+ років.

Типові помилки при верстці, які ми виправляємо - Inline-стилі в шаблонах — ламають кешування та об'єднання CSS. - Відсутність `component_epilog.php` — динамічний контент застигає. - Неправильне підключення скриптів через `