29 марта 2016

создание меню на Битрикс, верхнее меню, компонент Menu, типы меню битрикс

Создание меню в Битрикс - Часть 1

1С-Битрикс

Привет! И так, продолжаем разруливать тему "Битрикс". И сегодня посмотрим как на самом деле происходит создание меню на Битрикс. Как это ни странно, но без небольшого багажа знаний и ухищрений этот процесс может вызвать затруднения у многих обывателей, решивших что Битрикс им по зубам:)

Приступим!

Что именно будем делать в этом уроке?

Создадим на сайте 3 типа меню:

Верхнее - тип top (файлы с именем .top.menu.php)
Верхнее 2 и 3 уровня - тип subtop (файлы с именем .subtop.menu.php)
Нижнее - тип bottom (файлы с именем .bottom.menu.php)
Верхнее меню будет наследоваться из разделов и будет многоуровневым. Нижнее же меню будет обычным одноуровневым меню, лежащим в корне.

Сделаю небольшой экскурс. Так как практически вся работа битрикса (обработка данных и их вывод) основана на различных компонентах, то стоит пояснить с чем мы имеем дело в данном уроке.

Компонент Menu (bitrix:menu).

Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля. В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню. В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):

Горизонтальное многоуровневое выпадающее меню (Яркий) (horizontal_multilevel);
Левое меню (Яркий) (left);
Вертикальное меню по умолчанию (Встроенный шаблон) (.default);
Голубое меню в виде закладок (Встроенный шаблон) (blue_tabs);
Серое меню в виде закладок (Встроенный шаблон) (grey_tabs);
Древовидное меню (Встроенный шаблон) (tree);
Вертикальное многоуровневое выпадающее меню (Встроенный шаблон) (vertical_multilevel).

Пример вызова

<?$APPLICATION->IncludeComponent("bitrix:menu",".default",Array(
        "ROOT_MENU_TYPE" => "top", 
        "MAX_LEVEL" => "1", 
        "CHILD_MENU_TYPE" => "top", 
        "USE_EXT" => "Y",
        "DELAY" => "N",
        "ALLOW_MULTI_SELECT" => "Y",
        "MENU_CACHE_TYPE" => "N", 
        "MENU_CACHE_TIME" => "3600", 
        "MENU_CACHE_USE_GROUPS" => "Y", 
        "MENU_CACHE_GET_VARS" => "" 
    )
);?>

Немного о параметрах, которые вы видите в примере вызова компонента.

ROOT_MENU_TYPE - Тип меню для первого уровня. Указывается тип меню верхнего уровня, соответствующий данному меню.

MAX_LEVEL - Уровень вложенности меню. В настройках компонента в выпадающем списке можно выбрать уровень вложенности. Доступно четыре уровня. Чем больше число, тем пункты более низких уровней будут отображены.

CHILD_MENU_TYPE - Тип меню для остальных уровней. Здесь указываем тип меню для меню нижних уровней.

USE_EXT [Y|N] - Дает возможность подключать файлы с именами вида .тип_меню.menu_ext.php. Подобные файлы нам очень понадобятся когда придется склеивать воедино нужные статические элементы меню и динамически сгенерированные пункты.

DELAY [Y|N] - Откладывает выполнение шаблона меню. При отмеченной опции выполнение шаблона будет происходить после загрузки страницы. Очень удобен при включенном кэшировании компонента, если нужно все же выполнять какие-то действия по модификации внешнего вида пунктов меню в зависимости от текущей страницы. Например, добавление пунктов меню в компонентах.

ALLOW_MULTI_SELECT [Y|N] - Разрешить несколько активных пунктов одновременно.

CACHE_TYPE - Тип кэширования.Варианты:

A - Авто: автоматически обновляет кэш компонентов в течение заданного времени;
Y - Кэшировать: для кэширования необходимо определить время кэширования;
N - Не кэшировать: кэширования нет в любом случае.

MENU_CACHE_TIME - Время кэширования. Задается в секундах.

MENU_CACHE_USE_GROUPS - Учитывать права доступа. При кэшировании будут учитываться права доступа пользователя к тем или иным пунктам меню. Если меню построено без учета прав доступа, флажок лучше снять - это уменьшит размер кэша.

MENU_CACHE_GET_VARS - Значимые переменные запроса. Если отображение меню зависит от параметров страницы, то при использовании кэширования необходимо указать параметры в этом поле. Параметры вводятся через запятую.

Стандартный набор параметров впечатляет, правда?)

Перейдем непосредственно к коду!

Верхнее меню будет наследоваться из разделов и будет многоуровневым. Нижнее меню будет обычным одноуровневым меню, лежащим в корне. Создадим в корне файловой системы меню. Это можно сделать через административный раздел, либо же просто создать файл с именем .ТИП_МЕНЮ.menu.php следующего содержания (пример для файла меню типа top):

<? $aMenuLinks = Array( 
      Array( 
          "Home", 
          "/", 
          Array(), 
          Array(), 
          "" 
      ), 
      Array( 
          "About", 
          "/about/", 
          Array(), 
          Array(), 
          "" 
      ), 
      Array( 
          "Services", 
          "/services/", 
          Array(), 
          Array(), 
          "" 
      ), 
      Array( 
          "Contacts", 
          "/contacts/", 
          Array(), 
          Array(), 
          "" 
      ) 
); ?>

Если к примеру нужно создать вложенные пункты в пункте About в верхнем меню, можно воспользоваться архитектурой 1С-Битрикс и создать разделы /about/ и /about/profile/, а так же по меню типа "top" в каждом из них (пока не будем создавать страниц, только файловую структуру разделов и меню).

Далее надобно разместить сам компонент меню bitrix:menu на тестовой странице или же где-нибудь в шаблоне, к примеру в footer.php или header.php, в дальнейшем будем работать с ним.

Нижнее меню (bottom)

Советую начать с нижнего меню, оно проще и позволит хорошенько изучить и понять логику работы компонента. Воспользуемся шаблоном .default (он есть в стандартной сборке) и зададим для работы компонента меню типа "bottom" (нижнее):

<?$APPLICATION->IncludeComponent("bitrix:menu", ".default", array( 
"ROOT_MENU_TYPE" => "bottom", 
"MENU_CACHE_TYPE" => "N", 
"MENU_CACHE_TIME" => "3600", 
"MENU_CACHE_USE_GROUPS" => "Y", 
"MENU_CACHE_GET_VARS" => array( 
), 
"MAX_LEVEL" => "1", 
"CHILD_MENU_TYPE" => "left", 
"USE_EXT" => "N", 
"DELAY" => "N", 
"ALLOW_MULTI_SELECT" => "N" 
), 
false 
);?>

Этот код вам уже знаком с примера вызова компонента, который мы рассматривали выше. Так как в Битриксе шаблоны компонентов изначально лежат в папках с компонентами, лучше скопировать оригинальный дефолтный шаблон в папку с конкретным общим шаблоном нашего сайта, это надо делать как минимум для того чтобы не портить шаблон ядра компонента и чтобы все наши наработки не слетели при первом же обновлении системы. Поэтому скопируем шаблон компонента под именем "bottom" в шаблон сайта. Хоть это очень лаконичный шаблон, в целях обучения мы не возьмём от него практически ничего:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
<!--Проверка подключен ли пролог--> 

<?if (!empty($arResult)):?> 
<!--в массиве пунктов меню есть элементы--> 

<?foreach($arResult as $arItem):?> 
<!--цикл перебора элементов массива пунктов меню--> 

<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> 
<!--вывод пункта меню--> 

<?endforeach?> 
<!--завершение цикла--> 

<?endif?>

В этом коде вы можете познакомится со своим другом, который будет вас преследовать на всех этапах разработки на Битрикс, это суперглобальный массив $arResult. В нем хранится все, что может вам понадобится в процессе создания сайта, а то что вы там не найдете можно в любой момент подключить или выбрать с базы благодаря чудо-файлу result_modifier.php, который находится в папке шаблона каждого компонента.Если в изначальной сборке вы его не обнаружили ничего страшного, его всегда можно создать и использовать на свое усмотрение.

Создается этот файл еще и для того, чтобы отделить логику от верстки, то есть обработав всю логику в файле result_modifier.php все полученные данные будут доступны для вывода в шаблоне компонента (файл template.php).

Давайте сделаем "вардамп" наших элементов и посмотрим, что за параметры нам предоставит массив $arResult.

<? echo "<pre>"; 
     var_dump($arItem); 
      echo "</pre>"; ?>

Поставим этот код сразу после начала цикла и сохраним шаблон. Основное, на что нам надо обратить внимание, это параметры:

[SELECTED]
[ITEM_INDEX]

Параметр [SELECTED] не пуст тогда, когда пункт меню соответствует нашему местонахождению в структуре сайта, то есть когда пункт выбран. Значит, мы легко можем использовать его для вывода нужного нам стиля, к примеру:

<?if($arItem["SELECTED"]):?>class="current"<?endif?>

Параметр [ITEM_INDEX] отражает номер пункта меню в массиве. Вся хитрость в том, что мы можем использовать его для простановки разделителей между главными пунктами меню. Слегка подкорректируем вёрстку и выведем разделитель следующим кодом:

<?if($arItem['ITEM_INDEX'] != 0) :?>/<?endif?>

В итоге, на данном этапе, соединив все в кучу, шаблон компонента меню будет выглядеть так:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
<?if (!empty($arResult)):?> 
<ul class="footer-menu"> 
    <?foreach($arResult as $arItem):?> 
        <li><?if($arItem['ITEM_INDEX'] != 0) :?>/<?endif?><a <?if($arItem["SELECTED"]):?>
        class="current"<?endif?> href="<?=$arItem["LINK"]?>"><?  =$arItem["TEXT"]?></a></li> 
    <?endforeach?> 
</ul> 
<?endif?>

Также мы смело можем удалить лишние файлы, который нам достались при копировании оригинального шаблона .default.

Теперь размещаем вызов компонента нижнего меню вместо статики в шаблоне, которую я указывал ранее. Не забываем указывать тип и время кэширования, если конечно оно вам надо:)

<?$APPLICATION->IncludeComponent("bitrix:menu", "bottom", array( 
"ROOT_MENU_TYPE" => "bottom", 
"MENU_CACHE_TYPE" => "A", 
"MENU_CACHE_TIME" => "86400", 
"MENU_CACHE_USE_GROUPS" => "Y", 
"MENU_CACHE_GET_VARS" => array( 
), 
"MAX_LEVEL" => "1", 
"CHILD_MENU_TYPE" => "left", 
"USE_EXT" => "N", 
"DELAY" => "N", 
"ALLOW_MULTI_SELECT" => "N" 
), 
false 
);?>

Вуаля!) Простое нижнее меню готово, причем мы успели сделать разделители между пунктами, а также сделали возможность выделять активный пункт, заняло это всего две строчки кода, поэтому все очень быстро и удобно, главное понять логику работы компонента.

Ждите скоро продолжение - реализацию динамического верхнего меню и подписывайтесь на нас в соцсетях:) Будет очень интересно!

vk.com
Комментарии