Прикрепляем иконки к пунктам меню

Как обычно для демонстрации примеров из своих заметок я использую демо-версию Битрикса (в процессе установки выбираю вариант «для разработчиков»). В ней есть примеры меню (Типовые примеры → Меню). Файлы с иконками я разместил в папке /upload/menu_icons/. Итак, скопируем файл .top.menu.php из корневой папки сайта в папку /examples/menu/. Для того, чтобы увидеть разницу до и после добавления иконок, нужно открыть файл /examples/menu/index.php и скопировать код вызова компонента меню, вставив его один под другой. Таким образом на странице будет отображаться 2 одинаковых меню. В обоих вариантах нужно выбрать шаблон ‘.default’. Затем скопировать у одного из компонентов его шаблон – его и будем изменять для отображения «иконок». При копировании я назвал его ‘icons’. Теперь можно приступать к изменениям файла меню (/examples/menu/.top.menu.php) и шаблона компонента. В файле с меню нужно изменить массив дополнительных переменных, передаваемых в шаблон меню: добавляем в него элемент “ICON_FILE”. В нем будет храниться путь к файлу с «иконкой». Аналогичные действия проводим с массивом каждого пункта меню. Подробнее о массиве $aMenuLinks можно почитать в документации для разработчиков.

PHP

$aMenuLinks = Array(
	Array(
	    "Главная", 
   	    "/", 
  	   Array(), 
  	   Array("ICON_FILE" => "/upload/menu_icons/main.png"), 
	   "" 
	),
     //…
);

После этого открываем для изменения файл шаблона компонента (/bitrix/templates/books/components/bitrix/menu/icons/template.php). Если вывести на страницу с меню содержимое массива $arResut, то можно будет увидеть следующую картину.

На скриншоте с фрагментом массива $arResult можно увидеть, что в нем появился массив “PARAMS”, а в нем – наш элемент “ICON_FILE”.

Теперь можно смело делать изменения в шаблоне компонента меню. После изменений код шаблона будет выглядеть следующим образом.

PHP

	<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
	<?if (!empty($arResult)):?>
	<ul class="left-menu">
	<?
	foreach($arResult as $arItem):
		if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
			continue;
	?>
	<?if($arItem["SELECTED"]):?>
		<li>
		<?if(isset($arItem["PARAMS"]["ICON_FILE"])):?>
			<img src="/<?=$arItem["PARAMS"]["ICON_FILE"]?>" />
		<?endif?>
		<a href="/<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
	<?else:?>
		 <li>
		<?if(isset($arItem["PARAMS"]["ICON_FILE"])):?>
				 <img src="/<?=$arItem["PARAMS"]["ICON_FILE"]?>" />
		<?endif?>
		<a href="/<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
	<?endif?>	
	<?endforeach?>
	</ul>
	<?endif?>

Итак, задача решена: в шаблон добавлен вывод иконок!