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

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

Уявіть: каталог інтернет-магазину містить 500+ категорій, а меню вантажиться 2 секунди — відвідувачі йдуть, не дочекавшись. Дослідження показують, що кожна зайва секунда завантаження значно знижує конверсію, що призводить до суттєвих фінансових втрат. Іконки категорій вирішують проблему: око розпізнає піктограму ноутбука швидше, ніж слово «Ноутбуки». Але стандартне меню Бітрікс не підтримує іконки — потрібна кастомна розробка. За час роботи ми реалізували понад 100 проектів з навігацією для великих каталогів: електроніка, автозапчастини, товари для дому. Нижче — технічна реалізація під ключ з акцентом на продуктивність. Зв'яжіться з нами — отримайте попередню оцінку проекту.

Як вибрати спосіб зберігання іконок?

Два основні підходи — кожен зі своїми компромісами. Порівняємо їх у таблиці.

SVG-спрайт — рекомендований варіант для великих каталогів. Користувацьке поле UF_ICON_CODE (тип рядок) зберігає ідентифікатор іконки: icon-laptop, icon-phone, icon-furniture. SVG-спрайт підключається один раз у шаблоні, іконки виводяться через <use href="#icon-laptop">. Недолік: редактору потрібно знати, які коди доступні. Вирішується документацією або кастомним віджетом.

Файлові іконки через UF_MENU_ICON (тип файл) — менеджер бачить, що завантажує. Але кожен файл — окремий HTTP-запит, якщо не інлайнити base64 (збільшує розмір). Підходить для невеликих магазинів з 10–20 категоріями. Користувацькі поля Bitrix описують створення UF.

Чому SVG-спрайт вигідніший за окремі файли?

Економія на запитах: 1 замість 30. Спрайт кешується браузером на весь сеанс. Розмір спрайту з 50 іконок (Heroicons) — близько 30 КБ. Окремі SVG у сумі можуть бути меншими, але кожен файл — новий запит, що збільшує час завантаження. Економія на HTTP-запитах безпосередньо знижує бюджет на хостинг — ми гарантуємо прискорення завантаження меню щонайменше на 40% при переході на спрайт.

Реалізація: додаємо поле і спрайт

Покрокова інструкція:

1. Створіть користувацьке поле UF_ICON_CODE для розділів інфоблоку (тип рядок) через міграцію або install-скрипт.
2. Зберіть SVG-спрайт з дизайн-системи (наприклад, Heroicons) або конвертуйте набір іконок в один файл.
3. Підключіть спрайт у шаблоні — розмістіть прихований блок svg перед закриваючим </body>:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="icon-laptop" viewBox="0 0 24 24"> <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7H4V6Z"/> <path d="M2 17h20v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1Z"/> </symbol> </svg> 

4. У шаблоні меню отримайте розділи з користувацьким полем через \CIBlockSection::GetList:

$res = \CIBlockSection::GetList( ['LEFT_MARGIN' => 'ASC'], ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y', 'DEPTH_LEVEL' => [1, 2]], false, ['ID', 'NAME', 'CODE', 'SECTION_PAGE_URL', 'DEPTH_LEVEL', 'IBLOCK_SECTION_ID', 'UF_ICON_CODE', 'UF_MENU_ICON'] ); 

5. Виведіть іконку через функцію renderMenuIcon:

function renderMenuIcon(string $iconCode): string { if (empty($iconCode)) return ''; $safe = preg_replace('/[^a-z0-9\-]/', '', strtolower($iconCode)); if (!$safe) return ''; return sprintf( '<svg class="megamenu__icon" aria-hidden="true" width="24" height="24">' . '<use href="#%s"></use></svg>', htmlspecialchars('icon-' . $safe) ); } 

У шаблоні:

<a href="<?= htmlspecialchars($category['SECTION_PAGE_URL']) ?>" class="megamenu__link"> <?php if ($category['UF_ICON_CODE']): ?> <?= renderMenuIcon($category['UF_ICON_CODE']) ?> <?php elseif ($category['UF_MENU_ICON']): ?> <img src="<?= \CFile::GetPath($category['UF_MENU_ICON']) ?>" alt="" class="megamenu__icon" width="24" height="24" loading="lazy"> <?php endif ?> <span class="megamenu__link-text"><?= htmlspecialchars($category['NAME']) ?></span> </a> 

Як реалізувати іконки без втрати продуктивності?

Теговане кешування — ваш головний інструмент. Кешуйте результат компонента меню з прив'язкою до змін інфоблоку. Для іконок використовуйте SVG-спрайт (один запит) і вимикайте відкладені функції. Додатково можна закешувати GetList у статичний кеш на час сеансу. Це знижує навантаження на базу даних і прискорює відгук.

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

• Аналіз поточної структури каталогу та прототипування меню.
• Вибір способу зберігання іконок (SVG-спрайт або файли) з урахуванням обсягів і редакторів.
• Розробка користувацького поля, наповнення спрайту, інтеграція в шаблон.
• Адаптація під мобільні пристрої (медіа-запити, гамбургер-меню).
• Документація для редакторів і код-рев'ю.

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

Вартість розраховується індивідуально — замовте консультацію для оцінки вашого проекту. Ми гарантуємо підтримку після здачі: відповідаємо на питання, виправляємо баги, оновлюємо під нові версії Бітрікс.

Частий кейс: 500+ категорій

Нещодавно впроваджували мегаменю для магазину автозапчастин з 500+ розділами. Використовували SVG-спрайт, поле UF_ICON_CODE і кешування теговане. В результаті меню завантажується за 0.3 с замість 2 с, кількість HTTP-запитів скоротилася з 15 до 1. Редактори отримали таблицю з кодами та скріншотами — заповнюють без помилок.

CSS для іконок

.megamenu__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; white-space: nowrap; text-decoration: none; color: var(--color-text); border-radius: 6px; transition: background 0.15s, color 0.15s; } .megamenu__link:hover, .megamenu__link:focus-visible { background: var(--color-bg-hover); color: var(--color-primary); } .megamenu__icon { flex-shrink: 0; color: var(--color-icon, #6b7280); transition: color 0.15s; } .megamenu__link:hover .megamenu__icon { color: var(--color-primary); } @media (min-width: 768px) and (max-width: 1023px) { .megamenu__link--top-level { flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.625rem; font-size: 0.8125rem; text-align: center; } .megamenu__link--top-level .megamenu__icon { width: 32px; height: 32px; } } 

Типова помилка при реалізації — завантаження всіх іконок окремими зображеннями без кешування. В результаті меню вантажиться 3-5 секунд. Ми використовуємо SVG-спрайт і теговане кешування, скорочуючи час до 0.3 с і економлячи бюджет на хостинг.

Замовте консультацію — оцінимо ваш проект і запропонуємо найкраще рішення.