Разработка мегаменю с иконками категорий в 1С-Битрикс
Представьте: каталог интернет-магазина содержит 500+ категорий, а меню грузится 2 секунды — посетители уходят, не дождавшись. Исследования показывают, что каждая лишняя секунда загрузки снижает конверсию на 7% — для магазина с оборотом 1 млн рублей это потеря 70 000 рублей в месяц. Иконки категорий решают проблему: глаз распознаёт пиктограмму ноутбука быстрее, чем слово «Ноутбуки». Но стандартное меню Битрикс не поддерживает иконки — требуется кастомная разработка. За время работы мы реализовали более 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% при переходе на спрайт. Для каталога с 500+ категориями это экономия от 5 000 до 15 000 рублей в месяц.
Реализация: добавляем поле и спрайт
Пошаговая инструкция:
- Создайте пользовательское поле 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 с и экономя бюджет на хостинг.
Закажите консультацию — оценим ваш проект и предложим лучшее решение.