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

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 секунди. Якщо після впровадження виникають питання — ми на зв'язку.

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