Розробка мегаменю з іконками категорій в 1С-Бітрікс
Уявіть: каталог інтернет-магазину містить 500+ категорій, а меню вантажиться 2 секунди — відвідувачі йдуть, не дочекавшись. Дослідження показують, що кожна зайва секунда завантаження значно знижує конверсію, що призводить до суттєвих фінансових втрат. Іконки категорій вирішують проблему: око розпізнає піктограму ноутбука швидше, ніж слово «Ноутбуки». Але стандартне меню Бітрікс не підтримує іконки — потрібна кастомна розробка. За час роботи ми реалізували понад 100 проектів з навігацією для великих каталогів: електроніка, автозапчастини, товари для дому. Нижче — технічна реалізація під ключ з акцентом на продуктивність. Зв'яжіться з нами — отримайте попередню оцінку проекту.
Як вибрати спосіб зберігання іконок?
Два основні підходи — кожен зі своїми компромісами. Порівняємо їх у таблиці.
| Критерій | SVG-спрайт + код іконки | Файл SVG/PNG у полі |
|---|---|---|
| Кількість HTTP-запитів | 1 (спрайт) | N (за кількістю іконок) |
| Зручність для редактора | Середня (потрібно знати код) | Висока (завантаження через адмінку) |
| Розмір сторінки | Мінімальний | Залежить від розміру файлів |
| Кешування | Відмінно (спрайт кешується) | Посередньо (кожен файл окремо) |
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% при переході на спрайт.
Реалізація: додаємо поле і спрайт
Покрокова інструкція:
- Створіть користувацьке поле UF_ICON_CODE для розділів інфоблоку (тип рядок) через міграцію або install-скрипт.
- Зберіть SVG-спрайт з дизайн-системи (наприклад, Heroicons) або конвертуйте набір іконок в один файл.
- Підключіть спрайт у шаблоні — розмістіть прихований блок
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>
- У шаблоні меню отримайте розділи з користувацьким полем через
\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']
);
- Виведіть іконку через функцію 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-спрайт або файли) з урахуванням обсягів і редакторів.
- Розробка користувацького поля, наповнення спрайту, інтеграція в шаблон.
- Адаптація під мобільні пристрої (медіа-запити, гамбургер-меню).
- Документація для редакторів і код-рев'ю.
Терміни реалізації
| Конфігурація | Термін |
|---|---|
| SVG-спрайт + поле UF_ICON_CODE + вивід | 2–3 дні |
| + файлові іконки через UF_MENU_ICON | +1 день |
| + віджет вибору іконки в адміністративній частині | +2–3 дні |
| + анімація іконок при hover | +0.5 дня |
Вартість розраховується індивідуально — замовте консультацію для оцінки вашого проекту. Ми гарантуємо підтримку після здачі: відповідаємо на питання, виправляємо баги, оновлюємо під нові версії Бітрікс.
Частий кейс: 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 с і економлячи бюджет на хостинг.
Замовте консультацію — оцінимо ваш проект і запропонуємо найкраще рішення.