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

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

Представьте: каталог интернет-магазина содержит 500+ категорий, а меню грузится 2 секунды — посетители уходят, не дождавшись. Исследования показывают, что каждая лишняя секунда загрузки снижает конверсию на 7% — для магазина с оборотом $9k–13k это потеря $630–910 в месяц. Иконки категорий решают проблему: глаз распознаёт пиктограмму ноутбука быстрее, чем слово «Ноутбуки». Но стандартное меню Битрикс не поддерживает иконки — требуется кастомная разработка. За время работы мы реализовали более 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% при переходе на спрайт. Для каталога с 500+ категориями это экономия от $50–150 в месяц.

Реализация: добавляем поле и спрайт

Пошаговая инструкция:

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 с и экономя бюджет на хостинг.

Закажите консультацию — оценим ваш проект и предложим лучшее решение.