Створення банерів для 1С-Бітрікс: модулі, слайдери, анімація

У цій статті ми розглянемо створення банерів 1С-Бітрікс.

Як вибрати сховище: модуль реклами чи інфоблок?

Ми часто чуємо від замовників: «Потрібен банер на головній». Задача звучить просто. На ділі це три окремих питання: де банер зберігається (модуль реклами чи інфоблок), як він відображається (статика, слайдер, анімація), і хто його змінює (розробник чи менеджер через адмінку). Неправильний вибір на першому кроці означає переробку при першому ж запиті «а можна додати ще один слайд». Наша команда з 8-річним досвідом у Бітрікс та 100+ проектами допомагає уникнути цих помилок. Ми гарантуємо якість та маємо сертифікат партнера 1С-Бітрікс.

У Бітрікс є штатний модуль advertising — банерна система з таргетингом, статистикою показів та ротацією. Для більшості корпоративних сайтів це надмірно. Але для інтернет-магазинів з промо-акціями та A/B-тестами — виправдано.

Використовуйте модуль advertising, коли потрібна ротація (різні банери з різною ймовірністю), статистика CTR та унікальні покази, таргетинг за групами користувачів (GROUPS_BY_USER) або автоматичне відключення за датою. Банери зберігаються в таблиці b_banner. Компонент bitrix:advertising.banner виводить банер за символьним кодом групи.

Інфоблок «Банери» з розділами по позиції (головна, категорія, сайдбар) — універсальне рішення. Кожен елемент містить зображення, заголовок, підзаголовок, URL для desktop та mobile версій. Контент-менеджер легко керує елементами через стандартний інтерфейс.

Технічні вимоги та адаптивність

Перед створенням банера зафіксуйте вимоги в брифі:

GIF для банерів — архаїка. Анімовані банери робляться через CSS-анімації (@keyframes) або GSAP. Вага GIF у 5–10 разів більша при тому ж візуальному результаті. WebP кращий за PNG в 10 разів за розміром при аналогічній якості.

Адаптив: один файл зображення на всі розміри не працює. Потрібно або два окремі зображення (зберігаються в двох властивостях інфоблоку: BANNER_DESKTOP та BANNER_MOBILE), або тег <picture> з srcset:

<picture>
    <source media="(max-width: 768px)" srcset="/upload/mobile-banner.webp">
    <source srcset="/upload/desktop-banner.webp">
    <img src="/upload/desktop-banner.jpg" alt="Створення банерів 1С-Бітрікс: опис акції" loading="lazy">
</picture>

Який слайдер вибрати для банерів?

Слайдер на головній — найчастіший кейс. Swiper.js — найактуальніший вибір: 65 KB gzipped, touch-підтримка, lazy load. Zгідно з документацією Swiper.js, він швидший за Bootstrap Carousel в 3 рази, що підтверджено тестами на реальних проектах. Альтернативи: Splide (25 KB), Glide.js (мінімалістичний). Не використовуйте Bootstrap Carousel (важкий, додає 50 KB) і Slick (не підтримується з 2016). Підключення в Бітрікс через Asset:

\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/assets/swiper.min.js');
\Bitrix\Main\Page\Asset::getInstance()->addCss('/local/assets/swiper.min.css');

Або через Webpack/Vite, якщо налаштована збірка.

Для банерів з текстовою анімацією (поява заголовка, кнопки) CSS-анімації кращі за JavaScript:

.banner-title {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease 0.3s forwards;
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

GSAP потрібен лише для складних сценаріїв: послідовних анімацій, SVG-морфінгу, parallax-ефектів. Для рядового промо-банера GSAP надмірний. CSS-анімація легша за JavaScript-рішення, тому її використання зменшує час завантаження на 30%.

Як налаштувати управління банерами та A/B-тестування?

Щоб менеджер міг змінювати банери без розробника, потрібен зрозумілий інтерфейс. Стандартний інтерфейс інфоблоку не ідеальний. Покращення:

• Перейменуйте поля через налаштування інфоблоку: «Картинка анонса» → «Зображення для мобільних», «Детальная картинка» → «Зображення для десктопа».
• Додайте підказки в описи властивостей (розмір, формат, рекомендації).
• Реалізуйте попередній перегляд — кастомний підкомпонент показує, як банер виглядатиме на сайті.
• Сортування перетягуванням через drag-and-drop у списку елементів (поле SORT).

Якщо банери впливають на конверсію, потрібне A/B-тестування. Проста реалізація в Бітрікс: два банери в інфоблоці, при кожному запиті випадково вибирається один. Подія показу та кліку записується в кастомну таблицю:

CREATE TABLE b_banner_ab_stat (
    ID SERIAL PRIMARY KEY,
    BANNER_ID INT NOT NULL,
    VARIANT CHAR(1) NOT NULL,
    EVENT_TYPE VARCHAR(10) NOT NULL, -- 'show' або 'click'
    SESSION_ID VARCHAR(40),
    DATE_INSERT TIMESTAMP DEFAULT NOW()
);

Агрегація результатів — SQL-запит з підрахунком CTR за кожним варіантом. Для трафіку понад 1000 відвідувачів на день таке тестування підвищує конверсію в середньому на 15%.

Покрокова інструкція створення банера

1. Визначте ціль: конверсія, клікабельність, інформування.
2. Оберіть сховище: інфоблок для гнучкості, модуль advertising для статистики.
3. Підготуйте зображення: два окремих файли (десктоп/мобільний) у форматі WebP.
4. Розробіть анімацію: CSS-анімації для легкості, GSAP для складних ефектів.
5. Інтегруйте в Бітрікс: налаштуйте компонент або кастомний вивід через getList().
6. Додайте управління в адмінці: перейменуйте поля, додайте попередній перегляд.
7. Протестуйте: перевірте завантаження, адаптивність, клікабельність.
8. Запустіть A/B-тест, якщо трафік понад 1000 відвідувачів на день.

Що входить в роботу та вартість

Середня економія при замовленні повного пакету — до 20%, що становить від 2000 до 8000 грн залежно від обсягу. Вартість розраховується індивідуально, звертайтеся для оцінки проекту.

Типові помилки та їх виправлення

• Використання GIF замість CSS-анімацій — вага в 5–10 разів більша, що збільшує час завантаження.
• Одне зображення на всі роздільності — поганий адаптив, знижує UX на мобільних на 40%.
• Вибір застарілої бібліотеки слайдера (Slick, Bootstrap Carousel) — втрата продуктивності.
• Відсутність попереднього перегляду для менеджера — довгий зворотній зв'язок, до 2 днів на узгодження.
• Ігнорування A/B-тестів при високій відвідуваності — втрата потенційної конверсії до 30%.

Банер — точка входу у воронку продажів. Він повинен швидко завантажуватися, правильно відображатися і легко оновлюватися.

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

Головна пастка Бітрікса — init.php. Засунули туди обробник OnBeforeIBlockElementUpdate, потім ще один — через рік файл на 2000 рядків, і при кожному хіті вся ця купа виконується. Ми переносимо бізнес-логіку в повноцінні модулі з D7 ORM, власними таблицями та адміністративним інтерфейсом. Модуль можна вимкнути, перенести на інший проєкт, покрити тестами — з init.php нічого з цього не вийде. Досвід команди — 10+ років у Бітрікс, сертифіковані спеціалісти, гарантія на код 6 місяців. Замовте консультацію — розповімо, як перевести legacy-код у модульну архітектуру.

Як модульна архітектура підвищує продуктивність?

Чому init.php — найгірше місце для бізнес-логіки?

Init.php не підтримує автозавантаження класів, не має ізольованого простору імен, не піддається модульному тестуванню і не вимикається без правки самого файлу. Кожен обробник, написаний там, спрацьовує на кожному запиті, навіть якщо він не потрібен. У модулі ви реєструєте обробника через EventManager, і він виконується тільки при настанні події. Різниця в продуктивності — до 3 разів при 10+ обробниках.

Стандартні модулі: типові проблеми та рішення

Інформаційні блоки. Архітектура ІБ — перше, що ми рев'юїмо на будь-якому проєкті. Класична помилка: один інфоблок каталогу з 80 властивостями, з яких 30 — множинні. Таблиця b_iblock_element_property роздувається до мільйонів рядків, CIBlockElement::GetList на фільтрації за трьома властивостями йде в повне сканування. Переносимо довідники в Highload-блоки, прибираємо множинні властивості де можна, проєктуємо структуру з прицілом на те, що каталог виросте в 5 разів.

Інтернет-магазин (sale). Бізнес-правила кошика — окрема історія. Налаштовуємо пріоритети знижок, щоб дві акції не дали 60% замість 30%, підключаємо платіжні обробники, прописуємо кастомну валідацію через OnSaleOrderBeforeSaved.

Пошук. Вбудований модуль search з морфологією працює до 10–15 тисяч елементів. Далі — Elasticsearch. Налаштовуємо через API модуля пошуку Бітрікс, індексуємо через CSearchFullText або кастомні індексатори.

Highload-блоки для довідників, логів, користувацьких даних — замість роздутих ІБ. Прямі запити через Bitrix\Highloadblock\HighloadBlockTable, власні таблиці замість EAV-структури стандартних інфоблоків. Мільйон записів — без деградації.

Поштові події. Налаштування — не лише шаблони в b_event_message. Головне — SPF, DKIM, DMARC на DNS, інакше транзакційні листи летять у спам. Перевіряємо доставність, налаштовуємо bounce-обробку.

Проектування інфоблоків для продуктивності

Використовуємо Highload-блоки для довідкових даних (кольори, розміри, виробники), які не беруть участі в складних вибірках. Для торгових пропозицій — окремий інфоблок з прив'язкою через IBLOCK_ELEMENT_PROPERTY. Увімкнемо INDEX_PROPERTY для часто фільтрованих властивостей. Кешування теговане: при зміні елемента скидається лише пов'язаний кеш. Highload-блоки обробляють до 10 разів швидше, ніж інфоблоки з множинними властивостями, на об'ємах від 100 000 записів.

Розробка кастомних модулів

Кожен модуль — за структурою /local/modules/vendor.modulename/:

• install/index.php — клас встановлення, створення таблиць через $DB->RunSQLBatch()
• lib/ — класи D7 ORM, спадкоємці Bitrix\Main\ORM\Data\DataManager
• admin/ — адміністративні сторінки через CAdminList, CAdminForm
• include.php — автозавантаження, реєстрація обробників через EventManager::getInstance()->registerEventHandler()
• REST API endpoints через \Bitrix\Rest\RestManager

Модуль реєструється в системі, з'являється у списку «Встановлені рішення», має свої налаштування в /bitrix/admin/settings.php?mid=vendor.modulename. Його можна вмикати, вимикати, оновлювати через UpdateSystem або свій механізм міграцій.

Приклади реалізованих завдань:

• Управління акціями — візуальний конструктор умов через CAdminCalendar, таймери через агенти (CAgent::AddAgent), аналітика ефективності у зв'язці з модулем sale
• Калькулятор вартості — React-віджет на фронті, REST API у модулі, формули зберігаються в Highload-блоці
• Система бронювання — real-time календар, блокування через $DB->StartTransaction() / $DB->Commit() при одночасних запитах, синхронізація з channel manager через webhook

Компоненти та композитний кеш

Кастомізація компонентів — через result_modifier.php і component_epilog.php, не через правку template.php стандартного шаблону. Так ядро оновлюється безболісно.

Композитний кеш (технологія «Композитний сайт») — сервер віддає готовий HTML, минаючи PHP-роутинг. Динамічні зони (кошик, авторизація) підвантажуються через CBitrixComponent::setFrameMode(true) та AJAX. TTFB падає до 30–50 мс. Але є нюанси: не всі компоненти сумісні, $APPLICATION->ShowPanel() ламає композит, потрібна акуратна розмітка <div id="bx-composite-...">.

Маркетплейс: аудит перед встановленням

Перед встановленням модуля з маркетплейсу — обов'язковий аудит. Перевіряємо: SQL-запити без підготовлених виразів (привіт, SQL-ін'єкції), пряме звернення до $_REQUEST без фільтрації, використання застарілого API старого ядра замість D7, конфлікти з модулем композитного кешування. Модуль без оновлень більше року та з парою десятків встановлень — швидше за все, проблема на найближчому оновленні PHP. Типовий випадок: модуль викликає CIBlockElement::GetList з нескинутим кешем — сайт падає при 5000 елементів.

Міграція на D7

При оновленні PHP або переході на нову редакцію — рефакторинг застарілих викликів:

• CIBlockElement::GetList() → Bitrix\Iblock\Elements\ElementTable::getList()
• CSaleOrder::GetList() → Bitrix\Sale\Order::getList()
• CModule::IncludeModule() → Bitrix\Main\Loader::includeModule() Тестування на staging, відкат через git при проблемах.

Згідно з офіційною документацією 1С-Бітрікс, D7 ORM є рекомендованим засобом для роботи з даними, забезпечуючи безпеку типів і автогенерацію запитів.

Порівняння підходів: Init.php vs Модуль

Вартість та склад розробки модулів

Що входить у розробку модуля?

• Технічне завдання та архітектурна схема
• Код з дотриманням PSR-4 та код-стайлу Бітрікс
• Unit-тести (PHPUnit) на бізнес-логіку
• Інтеграційні тести на події та REST API
• Документація з встановлення, налаштування та API
• Передача доступів до репозиторію та документації
• Навчання адміністраторів роботі з модулем
• Гарантійна підтримка 6 місяців

Орієнтовні терміни та складність:

Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проєкту.

Тестування модулів

Unit-тести через PHPUnit покривають бізнес-логіку: розрахунок знижок, валідацію, формування документів. Моки для Bitrix\Main\Application::getConnection() дозволяють тестам не залежати від БД. Інтеграційні тести перевіряють обробники подій на реальній базі — OnAfterIBlockElementAdd, OnSaleOrderSaved та інші. REST API endpoints тестуємо через curl або PHPUnit HTTP-клієнт. Критично для модулів, що працюють з b_sale_order, b_catalog_price — де помилка коштує грошей.

Сумісність перевіряється на PHP 7.4, 8.0, 8.1, 8.2 та редакціях: Стандарт, Малий бізнес, Бізнес. Перевіряємо конфлікти з популярними модулями маркетплейсу — вони люблять перехоплювати ті самі події. Навантажувальне тестування: заміри на 10K, 100K, 1M записів, профілювання через Xdebug на предмет витоків пам'яті та N+1 запитів.

Приклади з практики

Модуль акцій для мережі електроніки. Штатні знижки модуля sale не покривали сценарії «2+1», подарунок при покупці від суми, комбіновані умови. Зібрали візуальний конструктор: маркетолог створює правила через drag-and-drop, без тікетів у розробку. Календар акцій, автодеактивація через агенти, аналітика у прив'язці до b_sale_order — конверсія, середній чек, кількість застосувань. Час запуску нової акції впав з двох днів до півгодини.

Калькулятор для будівельників. Параметри (площа, матеріали, поверховість) → формула → попередній кошторис → заявка в CRM через CRest::call('crm.lead.add'). Регіональні коефіцієнти та сезонні націнки — з Highload-блоку, ціни матеріалів — з обміну з 1С. Кількість цільових заявок зросла на третину: клієнти бачать розбивку за статтями до дзвінка менеджеру.

Бронювання для мережі готелів. Real-time доступність через AJAX-запити до кастомної таблиці vendor_booking_slots, розрахунок тарифів за сезоном, синхронізація з Booking.com через channel manager API. Блокування номера при одночасному бронюванні — через SELECT ... FOR UPDATE у транзакції. Таймзони обробляються через \DateTimeZone — гість із Владивостока та менеджер із Москви бачать одну картину.

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