Разработка мегаменю с баннерами и акциями на 1С-Битрикс: рост конверсии

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

Мегаменю с баннерами и акциями — наша готовая практика на 1С-Битрикс. Менеджер сам меняет промо-материалы через административную панель, не отвлекая разработчика. Вы получаете рост конверсии в категориях без дополнительных рекламных мест. Средняя экономия на рекламных местах составляет 15–30% бюджета — для магазина с оборотом 500 000 ₽ в месяц это около 75–150 тыс. ₽ экономии. Окупается за 2–3 месяца. Решение грузится менее 0.3 секунды благодаря тегированному кэшированию. Документация по 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;
    }
}

Шаблон мегаменю с баннером и акциями

<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="<?= htmlspecialchars($banners[0]['UF_TITLE'] ?? '') ?>"
                     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 и доступность.

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 минут (акции меняются чаще, чем структура разделов). Инвалидация — при сохранении 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-блока.
• Отсутствие alt-текста у баннеров: это ухудшает SEO и доступность. Используйте заголовок баннера в качестве alt.
• Неправильный SQL-запрос для акций: убедитесь, что группа цен «Акционная цена» (CATALOG_GROUP_ID = 2) создана и цены действительно ниже базовой.
• Слишком много акционных товаров: лимит 4 товара оптимален для скорости загрузки и восприятия.

Сроки реализации

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

Стандартное меню показывает только ссылки. Наше мегаменю в правой колонке выводит баннер акции и карточки товаров со скидкой. Пользователь видит промо сразу, не покидая навигацию. По нашим данным, такой подход увеличивает кликабельность баннеров на 40–60% по сравнению с отдельными рекламными местами. Мегаменю с баннерами лучше обычного меню в 1.5 раза по конверсии.

Что входит в работу

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

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

Как мы гарантируем результат

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

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

Почему вёрстка сайтов на 1С-Битрикс требует профессионализма?

Открываете template.php у предыдущего подрядчика — а там SQL-запросы, бизнес-логика и inline-стили в одном файле. На каждом втором проекте, который берём на поддержку, код шаблонов выглядит как свалка: кэш не работает, добавить новую фичу — переписывай всё. Средняя стоимость исправления такой вёрстки сайтов — 15 000–30 000 рублей только на отладку, а потерянная выручка из-за сломанной корзины в пик сезона может уходить в миллионы. Наша команда с 10-летним опытом строго разделяет: логика — в 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% по сравнению с полным сбросом.

Реальный кейс. Клиент жаловался — на странице каталога у всех одна корзина. Оказалось, предыдущий разработчик вывел $_SESSION['BASKET'] внутри template.php компонента catalog.section. Компонент кэшировался на час — корзина застыла. Перенесли вывод в component_epilog.php, настроили тегированный кэш на sale.basket.basket.line. Страница не потеряла в скорости, корзина стала актуальной. Ущерб от неработающей корзины в пик сезона мог составлять миллионы, а цена исправления — в пределах 15 000 рублей. Другой клиент потерял 200 000 рублей за неделю из-за некорректного кэша формы заказа — мы вернули работоспособность за два дня.

Официальная документация Битрикс рекомендует использовать component_epilog.php для динамических вставок — подробнее в руководстве.

CSS-подходы: BEM, Tailwind или гибрид?

Для больших проектов (30+ шаблонов) используем BEM — .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет. Подробнее о BEM. В Битрикс обёртки с классами 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+ лет — получите консультацию по вашему проекту до начала работ.

Процесс работы:

1. Анализ макетов и текущего проекта — выявляем компоненты для переработки
2. Проектирование структуры — разбиваем страницу на BEM-блоки
3. Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
4. Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
5. Деплой — стейджинг, приёмка, продакшен

На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.

Сроки

После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.