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

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 секунды. Если после внедрения возникают вопросы — мы на связи.

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