Меню с иконками

10.07.2024
281

Задача

У нас есть ссылки такого вида. И нам нужно предоставить пользователю их кастомизировать.

Если выводить это во включаемую область и ЕСЛИ иконка будет SVG тегом, то Битрикс вырежет весь SVG код в целях безопасности.

Предлагаю элегантное решение через компонент меню.

Содержание

  • Создаем меню

  • Выводим компонент

  • Добавляем пункты меню

  • Правим шаблон компонента

Создаем меню

В админ. панели: Настройки модулей → Управление структурой

Выводим компонент

// Ссылки
<? $APPLICATION->IncludeComponent(
    "bitrix:menu",
    "toplinks", // Используем один шаблон
    [
        "ALLOW_MULTI_SELECT" => "N",
        "CHILD_MENU_TYPE" => "section",
        "DELAY" => "N",
        "MAX_LEVEL" => "1",
        "MENU_CACHE_GET_VARS" => [""],
        "MENU_CACHE_TIME" => "3600",
        "MENU_CACHE_TYPE" => "N",
        "MENU_CACHE_USE_GROUPS" => "Y",
        "ROOT_MENU_TYPE" => "toplinks", // Код меню, которое мы создали выше
        "USE_EXT" => "N",
        // Custom.
        "CONTAINER_CLASS" => "top-bar__links" // У нас по верстке отличается только класс контейнера
    ]
); ?>
// Социальные сети
<? $APPLICATION->IncludeComponent(
    "bitrix:menu",
    "toplinks",  // Используем один шаблон
    [
        "ALLOW_MULTI_SELECT" => "N",
        "CHILD_MENU_TYPE" => "section",
        "DELAY" => "N",
        "MAX_LEVEL" => "1",
        "MENU_CACHE_GET_VARS" => [""],
        "MENU_CACHE_TIME" => "3600",
        "MENU_CACHE_TYPE" => "N",
        "MENU_CACHE_USE_GROUPS" => "Y",
        "ROOT_MENU_TYPE" => "topsocials", // Код меню, которое мы создали выше
        "USE_EXT" => "N",
        // Custom.
        "CONTAINER_CLASS" => "top-bar__social" // У нас по верстке отличается только класс контейнера
    ]
); ?>

Непосредственно меню

<?
// .toplinks.menu.php
$aMenuLinks = [
    [
        "Как сделать заказ",
        "/",
        [],
        ["ICON_LINK" => SITE_TEMPLATE_PATH . "/assets/img/order.svg"], // В параметры добавляем путь к иконке.
        "",
    ],
    [
        "Скачать каталог",
        "/documents/catalog.pdf",
        [],
        ["ICON_LINK" => SITE_TEMPLATE_PATH . "/assets/img/catalog.svg"],
        "",
    ],
    [
        "zakaz@sbk-g.com",
        "zakaz@sbk-g.com",
        [],
        ["ICON_LINK" => SITE_TEMPLATE_PATH . "/assets/img/mail.svg"],
        "",
    ],
];
<?
// .topsocials.menu.php
$aMenuLinks = [
    [
        "", // Оставляем пустым т.к. нам нужна только иконка
        "/",
        [],
        ["ICON_LINK" => SITE_TEMPLATE_PATH . "/assets/img/social/tg.svg"],
        "",
    ],
    [
        "",
        "/documents/catalog.pdf",
        [],
        ["ICON_LINK" => SITE_TEMPLATE_PATH . "/assets/img/social/wa.svg"],
        "",
    ],
];

Шаблон компонента

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) {
    die();
}
/**
 * @var $arParams
 */
?>
<? if (!empty($arResult)) { ?>
    <div class="<?= $arParams['CONTAINER_CLASS'] ?>"> // Наш класс из параметров.
        <?
        foreach ($arResult as $arItem) {
            if ($arParams["MAX_LEVEL"] === 1 && $arItem["DEPTH_LEVEL"] > 1) {
                continue;
            }
            if (strpos($arItem["LINK"], '@')) { // Проверяем если почта, то в ссылку добавим mailto:
                if ($arItem["LINK"][0] === '/') { // по умолчанию прилетает ссылка с '/' в начале. Для почты вырежем это.
                    $arItem["LINK"] = substr($arItem["LINK"], 1);
                }
                $arItem["LINK"] = 'mailto:' . $arItem["LINK"];
            }
            ?>
            <a href="<?=$arItem["LINK"]?>">
                <img src="<?=$arItem['PARAMS']['ICON_LINK']?>" alt="">
                <? if($arItem["TEXT"]) {?>
                    <span><?=$arItem["TEXT"]?></span>
                <? } ?>
            </a>
        <? } ?>
    </div>
<? } ?>

РЕЗУЛЬТАТ

Теперь мы можем редактировать пункты меню из публичной части в режиме правки

И в расширенном режиме из админ. панели

Назад В корень