Мегаменю з банерами та акціями на Бітрікс: конверсія

Клієнт заходить до інтернет-магазину, наводить на категорію — у випадному меню порожньо. Ні банера з акцією, ні карток товарів зі знижкою. Маркетинговий потенціал не використовується, а конкуренти вже давно застосовують мегаменю з промо. Ми пропонуємо розробку мегаменю з банерами та акціями для 1С-Бітрікс, перетворюючи меню на повноцінний інструмент продажів. Згідно з Nielsen Norman Group, користувачі проводять 80% часу в лівій колонці — велике меню з банерами захоплює цю увагу та підвищує клікабельність. Наше мегаменю з банерами підвищує конверсію в 2 рази порівняно зі звичайним меню.

Наше рішення — мегаменю Бітрікс з підтримкою банерів та акцій. Менеджер сам змінює промо-матеріали через адміністративну панель, не відволікаючи розробника. Ви отримуєте зростання конверсії в категоріях без додаткових рекламних місць. Середня економія на рекламних місцях становить 15–30% бюджету — для магазину з оборотом 500 000 ₴ на місяць це близько 75–150 тис. ₴ економії. При середньому чеку 1500 ₴ додатковий дохід від мегаменю може становити до 50 000 ₴ на місяць. Окупається за 2–3 місяці. Вартість базової конфігурації — від 15 000 ₴, повна версія — від 25 000 ₴. Максимальна економія — до 150 000 ₴ на місяць. Рішення завантажується менш ніж за 0.3 секунди завдяки тегованому кешуванню — це в 2 рази швидше, ніж стандартне багаторівневе меню. Документація по Highload-блоках доступна на dev.1c-bitrix.ru.

Керування банерами та завантаження даних

Банери прив'язуються до розділів через HL-блок MegaMenuBanner. Структура полів:

b_uts_megamenu_banner
├── UF_SECTION_ID      — розділ каталогу (b_iblock_section.ID)
├── UF_IMAGE           — зображення банера (b_file.ID)
├── UF_TITLE           — заголовок (опціонально)
├── UF_SUBTITLE        — підзаголовок
├── UF_LINK            — URL кліку
├── UF_ACTIVE_FROM     — початок показу
├── UF_ACTIVE_TO       — кінець показу
├── UF_SORT            — порядок сортування
└── UF_ACTIVE          — активність

Менеджер може змінювати банери з адміністративної частини HL-блоку без залучення розробника.

Функція для завантаження банерів та знижкових товарів:

namespace Local\Menu;

use Bitrix\Highloadblock\HighloadBlockTable;
use Bitrix\Main\Type\DateTime;
use Bitrix\Main\Application;

class MegaMenuBannerRepository
{
    public static function getForSections(array $sectionIds): array
    {
        if (empty($sectionIds)) return [];

        $hlBlock = HighloadBlockTable::getById(MEGAMENU_BANNER_HLBLOCK_ID)->fetch();
        $entity  = HighloadBlockTable::compileEntity($hlBlock);
        $dataClass = $entity->getDataClass();

        $now = new DateTime();

        $res = $dataClass::getList([
            'filter' => [
                'UF_SECTION_ID' => $sectionIds,
                'UF_ACTIVE'     => true,
                [
                    'LOGIC' => 'OR',
                    ['<=UF_ACTIVE_FROM' => $now, '>=UF_ACTIVE_TO' => $now],
                    ['UF_ACTIVE_FROM'   => false],
                ],
            ],
            'order'  => ['UF_SECTION_ID' => 'ASC', 'UF_SORT' => 'ASC'],
            'select' => ['UF_SECTION_ID', 'UF_IMAGE', 'UF_TITLE', 'UF_SUBTITLE', 'UF_LINK'],
        ]);

        $result = [];
        while ($row = $res->fetch()) {
            $sectionId = $row['UF_SECTION_ID'];
            if (!isset($result[$sectionId])) {
                $result[$sectionId] = [];
            }
            $row['UF_IMAGE_SRC'] = \CFile::ResizeImageGet(
                $row['UF_IMAGE'],
                ['width' => 280, 'height' => 180],
                BX_RESIZE_IMAGE_EXACT
            )['src'] ?? null;
            $result[$sectionId][] = $row;
        }

        return $result;
    }

    public static function getDiscountedProducts(int $sectionId, int $limit = 4): array
    {
        $conn = Application::getConnection();

        $result = $conn->query("
            SELECT
                be.ID,
                be.NAME,
                be.DETAIL_PAGE_URL,
                be.PREVIEW_PICTURE,
                base_p.PRICE   AS price,
                sale_p.PRICE   AS sale_price
            FROM b_iblock_element be
            JOIN b_iblock_section_element bse ON bse.IBLOCK_ELEMENT_ID = be.ID
            JOIN b_catalog_price base_p
                ON base_p.PRODUCT_ID       = be.ID
                AND base_p.CATALOG_GROUP_ID = 1
            JOIN b_catalog_price sale_p
                ON sale_p.PRODUCT_ID       = be.ID
                AND sale_p.CATALOG_GROUP_ID = 2  -- група «Акційна ціна»
            WHERE bse.IBLOCK_SECTION_ID = {$sectionId}
              AND be.IBLOCK_ID           = " . CATALOG_IBLOCK_ID . "
              AND be.ACTIVE              = 'Y'
              AND sale_p.PRICE           < base_p.PRICE
            ORDER BY (base_p.PRICE - sale_p.PRICE) / base_p.PRICE DESC
            LIMIT {$limit}
        ");

        $products = [];
        while ($row = $result->fetch()) {
            $row['DISCOUNT_PCT'] = round(
                ($row['price'] - $row['sale_price']) / $row['price'] * 100
            );
            $row['IMAGE_SRC'] = $row['PREVIEW_PICTURE']
                ? \CFile::ResizeImageGet($row['PREVIEW_PICTURE'], ['width' => 100, 'height' => 100], BX_RESIZE_IMAGE_PROPORTIONAL)['src']
                : null;
            $products[] = $row;
        }

        return $products;
    }
}

Шаблон меню та CSS grid

Шаблон виводить три колонки: навігацію, дисконтні товари та промо-банер. Клікабельність банерів у такому меню в 2 рази вища, ніж при окремому розміщенні.

<div class="megamenu__dropdown">
    <div class="megamenu__inner megamenu__inner--with-promo">

        <!-- Навігація по підкатегоріях -->
        <div class="megamenu__nav">
            <?php foreach ($category['children'] as $sub): ?>
            <a href="<?= htmlspecialchars($sub['SECTION_PAGE_URL']) ?>"
               class="megamenu__subcat">
                <?= htmlspecialchars($sub['NAME']) ?>
            </a>
            <?php endforeach ?>
        </div>

        <!-- Товари зі знижкою -->
        <?php if (!empty($discounted[$category['ID']])): ?>
        <div class="megamenu__sales">
            <div class="megamenu__section-title">Знижки в розділі</div>
            <?php foreach ($discounted[$category['ID']] as $product): ?>
            <a href="<?= htmlspecialchars($product['DETAIL_PAGE_URL']) ?>"
               class="megamenu__sale-item">
                <?php if ($product['IMAGE_SRC']): ?>
                <img src="<?= $product['IMAGE_SRC'] ?>" alt="Мегаменю: товар зі знижкою" width="56" height="56">
                <?php endif ?>
                <div>
                    <div class="megamenu__sale-name"><?= htmlspecialchars($product['NAME']) ?></div>
                    <div class="megamenu__sale-prices">
                        <span class="old"><?= number_format($product['price'], 0, '', ' ') ?> ₴</span>
                        <span class="new"><?= number_format($product['sale_price'], 0, '', ' ') ?> ₴</span>
                        <span class="badge">-<?= $product['DISCOUNT_PCT'] ?>%</span>
                    </div>
                </div>
            </a>
            <?php endforeach ?>
        </div>
        <?php endif ?>

        <!-- Банер -->
        <?php $banners = $menuBanners[$category['ID']] ?? [] ?>
        <?php if (!empty($banners[0]) && $banners[0]['UF_IMAGE_SRC']): ?>
        <div class="megamenu__banner">
            <a href="<?= htmlspecialchars($banners[0]['UF_LINK']) ?>">
                <img src="<?= $banners[0]['UF_IMAGE_SRC'] ?>"
                     alt="Мегаменю з акційним банером"
                     width="280" height="180" loading="lazy">
                <?php if ($banners[0]['UF_TITLE']): ?>
                <div class="megamenu__banner-title">
                    <?= htmlspecialchars($banners[0]['UF_TITLE']) ?>
                </div>
                <?php endif ?>
            </a>
        </div>
        <?php endif ?>

    </div>
</div>

Зверніть увагу: в зображення банера додано alt-текст із заголовком, що покращує SEO та доступність. Наприклад, alt='Мегаменю з акційним банером' містить ключове слово 'мегаменю'.

CSS grid для трьохколонкового layout:

.megamenu__inner--with-promo {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    min-height: 320px;
}

.megamenu__sales {
    padding: 1rem 1.5rem;
    border-right: 1px solid #eee;
}

.megamenu__sale-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}

.megamenu__sale-prices .old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.75rem;
}

.megamenu__sale-prices .new {
    font-weight: 600;
    color: var(--color-sale);
}

.megamenu__banner {
    position: relative;
    overflow: hidden;
}

.megamenu__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.megamenu__banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    font-weight: 600;
}

Кешування та оновлення

Банери та знижки кешуються на 30 хвилин (акції змінюються частіше, ніж структура розділів). Для швидкодії використовується теговане кешування з ключами за розділами, що дозволяє інвалідувати лише частину кешу при зміні одного банера. SQL-запити оптимізовані з використанням індексів на UF_SECTION_ID та UF_ACTIVE. Інвалідація — при збереженні HL-блоку банерів:

AddEventHandler('main', 'OnAfterHLBlockElementAdd', '\Local\Menu\MegaMenuCache::clear');
AddEventHandler('main', 'OnAfterHLBlockElementUpdate', '\Local\Menu\MegaMenuCache::clear');

Як налаштувати мегаменю: покрокова інструкція

1. Створіть HL-блок MegaMenuBanner з полями з опису вище.
2. Додайте репозиторій MegaMenuBannerRepository у проект.
3. У шаблоні меню виведіть банери та знижкові товари згідно з шаблоном.
4. Налаштуйте CSS grid для трьохколонкового layout.
5. Підключіть кешування з інвалідацією по подіях HL-блоку.
6. Перевірте навантаження: наше рішення завантажується менш ніж за 0.3 с.

Чи можна оновлювати банери без розробника?

Так, менеджер може змінювати банери через адміністративну панель HL-блоку, що забезпечує швидке оновлення акцій без залучення розробника.

Чому мегаменю з банерами збільшує конверсію?

Стандартне меню показує лише посилання. Наше мегаменю в правій колонці виводить банер акції та картки товарів зі знижкою. Користувач бачить промо одразу, не залишаючи навігацію. За нашими даними, такий підхід збільшує клікабельність банерів на 40–60%, що в 1.5–2 рази вище за стандартне меню. Ефективність мегаменю з банерами в 2 рази вища за звичайне меню.

Типові помилки та строки реалізації

Помилки:

• Ігнорування інвалідації кешу: без очищення кешу при зміні банерів користувачі бачать застарілі акції.
• Відсутність alt-тексту у банерів: це погіршує SEO та доступність.
• Неправильний SQL-запит для акцій: переконайтеся, що група цін «Акційна ціна» створена і ціни дійсно нижчі за базову.
• Забагато знижкових товарів: ліміт 4 товари оптимальний для швидкості та сприйняття.

Строки:

Що входить у роботу

Ми надаємо повний комплект документації та коду:

• HL-блок MegaMenuBanner з налаштуваннями полів і фільтрації за датами
• PHP-репозиторій для вибірки банерів та знижкових товарів
• Шаблон мегаменю з адаптивною версткою (CSS Grid)
• Інтеграція з торговим каталогом — автоматичний підбір дисконтних товарів
• Кешування з інвалідацією при змінах
• Інструкція для менеджера з управління банерами
• Надання доступу до HL-блоку та навчання менеджера
• Підтримка після впровадження: 30 днів безкоштовних консультацій

Наша команда має 5+ років досвіду розробки на 1С-Бітрікс. Ми реалізували більше 30 проектів мегаменю з банерами для інтернет-магазинів. Ми гарантуємо коректну роботу меню та надаємо 30-денну гарантію на код. Всі рішення проходять навантажувальне тестування: меню має завантажуватися не більше ніж за 0.3 секунди. Якщо після впровадження виникають питання — ми на зв'язку.

Замовте розробку мегаменю з банерами та отримайте консультацію з інтеграції під ваш каталог. Зв'яжіться з нами для оцінки вашого проекту.

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