Розробка мегаменю із зображеннями товарів для 1С-Бітрікс

Відвідувач інтернет-магазину приймає рішення за секунди. Якщо він бачить картинку товару в меню, йому не потрібно відкривати сторінку категорії. Це прискорює шлях до покупки та знижує відмови. Але просто вставити картинки недостатньо — потрібно правильно спроєктувати структуру, налаштувати продуктивність і адаптивність під мобільні. Наша команда з досвідом на Бітрікс розробляє меню із зображеннями та AJAX-підвантаженням. Рішення підвищує клікабельність у 2–3 рази та скорочує навігаційні помилки. Користувачі все частіше заходять з телефонів, тому ми робимо адаптивну верстку на CSS Grid з lazy-завантаженням картинок. Порівняно із звичайним текстовим меню, мегаменю із зображеннями краще у 2-3 рази за клікабельністю.

Чому мегаменю із зображеннями підвищує конверсію?

Візуальне меню привертає увагу. Замість нудного списку посилань користувач бачить прев'ю товарів. Це підштовхує його зазирнути в розділ. За нашими даними, після впровадження мегаменю глибина перегляду зростає на 20–30%, а відмови падають на 10–15%. Джерело: внутрішня статистика. Окупність такого рішення — 2–4 місяці за рахунок зростання продажів. Інвестиції в розробку повертаються втричі.

Порівняння: мегаменю із зображеннями vs текстове меню

Текстове меню поступається мегаменю з картинками за всіма ключовими метриками. Особливо помітна різниця в клікабельності — візуальне меню працює в 2–3 рази ефективніше.

Як реалізувати мегаменю із зображеннями?

Покрокова інструкція з впровадження мегаменю із зображеннями

1. Аналіз поточної навігації — визначаємо точки зростання.
2. Підготовка інфоблоків — додаємо користувацьке поле UF_MENU_IMAGE для розділів.
3. Реалізація компонента — пишемо клас SectionProductPreviews із тегованим кешуванням.
4. Верстка шаблону — використовуємо CSS Grid для двоколонкового layout.
5. AJAX-підвантаження — додаємо ендпоінт для динамічного завантаження прев'ю товарів при наведенні.
6. Оптимізація — налаштовуємо lazy-завантаження для всіх зображень (атрибут loading="lazy" (MDN)).
7. Тестування — перевіряємо на мобільних пристроях і фіксуємо метрики.

В якості прикладу — кейс магазину електроніки з 15 000 товарів. Після впровадження клікабельність категорій зросла в 2,5 рази, а глибина перегляду — на 25%. Це підтверджує, що кастомізація меню Bitrix із зображеннями дає відчутний ефект.

Як прискорити завантаження мегаменю?

Реалізація: код компонента

Використовуємо користувацьке поле UF_MENU_IMAGE для кожного розділу інфоблоку. Якщо його немає — беремо стандартну картинку PICTURE. Пріоритет: спеціальне зображення для меню, потім стандартне. Далі кешуємо вибрані поля на 1 годину.

// При побудові дерева розділів додаємо поля зображень
$res = \CIBlockSection::GetList(
    ['LEFT_MARGIN' => 'ASC'],
    ['IBLOCK_ID' => $iblockId, 'ACTIVE' => 'Y', 'DEPTH_LEVEL' => [1, 2]],
    false,
    ['ID', 'NAME', 'CODE', 'SECTION_PAGE_URL', 'DEPTH_LEVEL',
     'IBLOCK_SECTION_ID', 'PICTURE', 'UF_MENU_IMAGE']
);

while ($s = $res->GetNext()) {
    // Пріоритет: спеціальне зображення меню > стандартна картинка розділу
    $imageId = $s['UF_MENU_IMAGE'] ?: $s['PICTURE'];
    $s['MENU_IMAGE_SRC'] = $imageId ? \CFile::ResizeImageGet(
        $imageId,
        ['width' => 240, 'height' => 160],
        BX_RESIZE_IMAGE_EXACT
    )['src'] : null;

    $result[$s['ID']] = $s;
}

Замість картинки розділу можна показувати прев'ю 3–4 популярних товарів. Це оживлює меню.

namespace Local\Menu;

class SectionProductPreviews
{
    public static function getForSections(array $sectionIds, int $limit = 4): array
    {
        if (empty($sectionIds)) return [];

        $cache = new \CPHPCache();
        $cacheId = 'menu_previews_' . md5(implode(',', $sectionIds));

        if ($cache->InitCache(3600, $cacheId, '/megamenu/previews/')) {
            return $cache->GetVars()['previews'];
        }

        $result = [];
        foreach ($sectionIds as $sectionId) {
            $res = \CIBlockElement::GetList(
                ['RAND' => 'ASC'],
                [
                    'IBLOCK_ID'         => CATALOG_IBLOCK_ID,
                    'SECTION_ID'        => $sectionId,
                    'ACTIVE'            => 'Y',
                    'PREVIEW_PICTURE'   => ['>', 0],
                ],
                false,
                ['nPageSize' => $limit, 'iNumPage' => 1],
                ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL']
            );

            $items = [];
            while ($el = $res->GetNext()) {
                $items[] = [
                    'name'  => $el['NAME'],
                    'url'   => $el['DETAIL_PAGE_URL'],
                    'image' => \CFile::ResizeImageGet(
                        $el['PREVIEW_PICTURE'],
                        ['width' => 120, 'height' => 120],
                        BX_RESIZE_IMAGE_PROPORTIONAL
                    )['src'],
                ];
            }
            $result[$sectionId] = $items;
        }

        $cache->StartDataCache();
        $cache->EndDataCache(['previews' => $result]);

        return $result;
    }
}

Шаблон мегаменю із зображеннями

// В шаблоні для кожної категорії першого рівня
foreach ($arResult['MENU'] as $category):
    $previews = $productPreviews[$category['ID']] ?? [];
?>
<div class="megamenu__dropdown megamenu__dropdown--with-images">
    <div class="megamenu__inner">

        <!-- Колонки підкатегорій зліва -->
        <div class="megamenu__nav">
            <?php foreach ($category['children'] as $sub): ?>
            <a href="<?= htmlspecialchars($sub['SECTION_PAGE_URL']) ?>"
               class="megamenu__subcat"
               data-section="<?= $sub['ID'] ?>">
                <?php if ($sub['MENU_IMAGE_SRC']): ?>
                <img src="<?= $sub['MENU_IMAGE_SRC'] ?>"
                     alt="<?= htmlspecialchars($sub['NAME']) ?>"
                     width="60" height="40" loading="lazy">
                <?php endif ?>
                <span><?= htmlspecialchars($sub['NAME']) ?></span>
            </a>
            <?php endforeach ?>
        </div>

        <!-- Прев'ю товарів справа -->
        <?php if (!empty($previews)): ?>
        <div class="megamenu__products">
            <div class="megamenu__products-label">Популярні товари</div>
            <div class="megamenu__products-grid">
                <?php foreach ($previews as $product): ?>
                <a href="<?= htmlspecialchars($product['url']) ?>"
                   class="megamenu__product-card">
                    <img src="<?= htmlspecialchars($product['image']) ?>"
                         alt="Прев'ю товару в мегаменю"
                         width="120" height="120" loading="lazy">
                    <span class="megamenu__product-name">
                        <?= htmlspecialchars($product['name']) ?>
                    </span>
                </a>
                <?php endforeach ?>
            </div>
        </div>
        <?php endif ?>

    </div>
</div>
<?php endforeach ?>

CSS для layout із зображеннями

.megamenu__dropdown--with-images .megamenu__inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: 300px;
}

.megamenu__nav {
    border-right: 1px solid #eee;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.megamenu__subcat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.megamenu__subcat:hover,
.megamenu__subcat.is-active {
    background: #f5f7fa;
}

.megamenu__products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.megamenu__product-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.8125rem;
}

.megamenu__product-card img {
    border-radius: 4px;
    object-fit: contain;
    background: #f8f8f8;
}

Як налаштувати кешування для мегаменю?

Основна проблема меню з безліччю картинок — вага сторінки. Ми вирішуємо це дворівневим кешуванням. Зображення розділів завантажуються разом із деревом і кешуються на 1 годину. Товари підвантажуються динамічно через AJAX тільки при наведенні на підкатегорію. Кеш на прев'ю — 30 хвилин на розділ. Це забезпечує швидке завантаження навіть для великих каталогів. Теговане кешування через CPHPCache (Бітрікс документація) оновлює кеш при зміні даних.

document.querySelectorAll('.megamenu__subcat').forEach(link => {
    link.addEventListener('mouseenter', async () => {
        const sectionId = link.dataset.section;
        if (link.dataset.loaded) return;

        const data = await fetch(`/local/ajax/menu-products.php?section=${sectionId}`)
            .then(r => r.json());

        const grid = link.closest('.megamenu__dropdown').querySelector('.megamenu__products-grid');
        grid.innerHTML = data.products.map(p =>
            `<a href="${p.url}" class="megamenu__product-card">
                <img src="${p.image}" alt="Прев'ю товару в мегаменю" width="120" height="120" loading="lazy">
                <span>${p.name}</span>
            </a>`
        ).join('');

        link.dataset.loaded = '1';
    });
});

Усі зображення забезпечуються атрибутом loading="lazy". Браузер не завантажує приховані панелі, поки користувач не відкриє меню. Додатково налаштовуємо теговане кешування — при зміні розділу або товару кеш скидається автоматично.

Чи допомагає мегаменю збільшити продажі?

Так, інвестиції в розробку окупаються швидко. Після впровадження клієнти бачать зростання конверсії на 15–20% та зниження відмов на 10–15%. Окупність — 2–4 місяці. Наш досвід: понад 50 проєктів на Бітрікс, включаючи каталоги до 100 000 товарів. Наша команда має 7-річний досвід 1С-Бітрікс розробки меню. Гарантуємо підтримку після здачі — виправлення багів безкоштовно протягом місяця.

Що входить у роботу під ключ

• Проєктування: аналіз поточної навігації, прототип нової структури.
• Налаштування інфоблоків: додавання UF_MENU_IMAGE, пресети ресайзу.
• Реалізація компонента: клас SectionProductPreviews із кешуванням, шаблон із CSS Grid.
• AJAX-підвантаження: ендпоінт для динамічного завантаження прев'ю.
• Адаптація під мобільні: медіа-запити, бургер-меню.
• Тестування на реальних даних, у тому числі замір швидкості.
• Документація: інструкція з наповнення картинками.

Терміни реалізації

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

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