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

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

Іконки категорій у мегаменю вирішують навігаційне завдання швидше тексту: очей розпізнає піктограму ноутбука швидше, ніж читає слово «Ноутбуки». Для магазинів із великою кількістю категорій — електроніка, товари для дому, DIY — це стандарт. Реалізація в 1С-Бітрікс потребує поля для іконки в розділах інфоблоку та коректного виводу в шаблоні.

Зберігання іконок розділів

Два підходи:

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

2. Файл SVG/PNG. Користувацьке поле UF_MENU_ICON (тип файл) — завантажуємо SVG напряму через адміністративну частину. Менеджер бачить, що завантажує. Недолік: кілька HTTP-запитів на сторінку (або інлайн через base64).

Для великих магазинів рекомендуємо SVG-спрайт: усі іконки в одному файлі, жодних додаткових запитів.

Додавання користувацького поля до розділів

// /local/lib/Install/InstallMenuIcons.php
\CUserTypeEntity::Add([
    'ENTITY_ID'  => 'IBLOCK_' . CATALOG_IBLOCK_ID . '_SECTION',
    'FIELD_NAME' => 'UF_ICON_CODE',
    'USER_TYPE_ID' => 'string',
    'SORT'       => 100,
    'MULTIPLE'   => 'N',
    'MANDATORY'  => 'N',
    'EDIT_FORM_LABEL' => ['ru' => 'Код иконки (для мегаменю)', 'en' => 'Icon code'],
]);

SVG-спрайт

Спрайт збирається з дизайн-системи або завантажується з iconify/heroicons. Підключається перед </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>
    <symbol id="icon-smartphone" viewBox="0 0 24 24">
        <rect x="5" y="2" width="14" height="20" rx="2"/>
        <path d="M12 18h.01"/>
    </symbol>
    <!-- ... решта іконок ... -->
</svg>

Отримання іконки в шаблоні

// В result_modifier.php або безпосередньо в шаблоні
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)
    );
}

Шаблон мегаменю з іконками

// Завантаження розділів із користувацьким полем UF_ICON_CODE
$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']
);

<!-- У шаблоні: категорія першого рівня -->
<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>

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;
    }
}

Іконки через CSS content (альтернатива для emoji)

Для швидкого старту без дизайн-системи — emoji як іконки через CSS:

/* В UF_ICON_CODE зберігається emoji: 💻, 📱, 🪑 */
.megamenu__emoji-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

// У шаблоні
if (mb_strlen($category['UF_ICON_CODE']) <= 2) {
    // Швидше за все emoji
    echo '<span class="megamenu__emoji-icon" aria-hidden="true">'
       . htmlspecialchars($category['UF_ICON_CODE'])
       . '</span>';
}

Адміністративний інтерфейс для редакторів

Редакторам складно вводити код іконки вручну. Додаємо в адміністративну частину підказку — довідник доступних іконок із прев'ю. Реалізується через кастомний тип користувацького поля (UserTypeEntity) з віджетом вибору або через документацію зі скриншотами спрайту.

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