Многоуровневое меню Битрикс

Размещаем меню

Шаг 1

Я буду размещать меню в файле /company/index.php
Добавляем в индексный файл код вызова меню:

<?$APPLICATION->IncludeComponent( «bitrix:menu», «sections-elements», array( «ALLOW_MULTI_SELECT» => «Y», «CHILD_MENU_TYPE» => «left», «COMPONENT_TEMPLATE» => «.default», «DELAY» => «N», «MAX_LEVEL» => «3», «MENU_CACHE_GET_VARS» => array( ), «MENU_CACHE_TIME» => «3600», «MENU_CACHE_TYPE» => «A», «MENU_CACHE_USE_GROUPS» => «N», «MENU_THEME» => «site», «ROOT_MENU_TYPE» => «left», «USE_EXT» => «Y» ), false );?>

Шаблон «sections-elements» я тоже выкладываю его нужно закинуть по адресу /local/templates/шаблон-сайта/components/bitrix/menu/.
Он корректно поддерживает следующую структуру разделов и элементов:
Разделы в корне и элементы в этих разделах. Чтобы правильно отображались вложенные разделы, нужна доработка шаблона.

Шаг 2

Далее в разделе /company/ создаём файл .left.menu.php
Его содержимое:

<?php if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die(); global $APPLICATION; $aMenuLinksExt = $APPLICATION->IncludeComponent( «my_namespace:menu.sections», «», array( «IS_SEF» => «Y», «ID» => $_REQUEST, «IBLOCK_TYPE» => «data», «IBLOCK_ID» => «1», «SECTION_URL» => «», «DEPTH_LEVEL» => «3», «CACHE_TYPE» => «Y», «CACHE_TIME» => «3600», «SEF_BASE_URL» => «/company/», «SECTION_PAGE_URL» => «#SECTION_CODE#/», «DETAIL_PAGE_URL» => «#SECTION_CODE#/#ELEMENT_CODE#/» ), false ); $aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks); ?>

Создаем раздел для инфоблока

И так, первое, что нам нужно сделать это создать сам инфоблок (его создание не обязательно если он уже создан). Переходим в админку сайта, контент далее типы инфоблоков и нажимаем кнопку — создать новый тип. Предположим, что это будет инфоблок с названием – информация, где будем хранить контент для сайта.


После того как мы создали сам тип ИБ, переходим в него, далее нужно создать сам ИБ нажимаем кнопку — добавить инфоблок. Предположим, что это будет будущий блок новостей для нашего сайта.

Задаем название нашего ИБ и незабываем открыть для него доступ, чтобы он был виден на визуальной части сайта Битрикс и жмем кнопку — сохранить.

Переходим в наш новосозданный ИБ — новости. Давайте представим, что новости у нас будут разбиты на разные категории, давайте их создадим.

Допустим, что новости будут про достопримечательности разных городов России. Каждая категория будет описывать отдельный город. Я создам для примера три категории – Сочи, Москва, Санкт-Петербург.

Создаем меню Битрикс

Итак все подготовительные работы проделаны давайте создадим сами типы меню. Для этого идем в настройки, настройки продукта, настройки модулей, управление структурой. Здесь нам нужно создать в разделе – типы меню, название нашего нового меню и нажать кнопку – сохранить.

Идем далее, давайте создадим сам раздел (папку) – новости в которую мы положим комплексный компонент – новостей.

Перейдем в данный раздел и нажмем кнопку – добавить и выберем – добавить меню.

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

После чего у нас в данном разделе появится новый файл – Меню типа «top_nav». Что нам нужно сделать еще, нужно создать еще один файл и назвать его – .top_nav.menu.ext.php

Катим далее, как не странно но именно на этом этапе большенство не понимают, что за файл и как его называть. Все просто, создаем новый файл в данной категории и называем его точно также как наш тип меню, разница лишь в том, что нужно добавить точку в начале и в конце указать точку, после нее добавить ext.php В итоге должно получиться следующие – .top_nav.menu_ext.php

После чего нужно открыть данный файл на редактирования как PHP

и поместить в него следущий код:

<? if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die(); global $APPLICATION; $aMenuLinksExt=$APPLICATION->IncludeComponent(«bitrix:menu.sections», «», array( «IS_SEF» => «Y», «SEF_BASE_URL» => «/news/», «SECTION_PAGE_URL» => «#SECTION_ID#/», «DETAIL_PAGE_URL» => «#SECTION_ID#/#ELEMENT_ID#/», «IBLOCK_TYPE» => «company», «IBLOCK_ID» => «21», «DEPTH_LEVEL» => «3», «CACHE_TYPE» => «A», «CACHE_TIME» => «36000000» ), false ); $aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks); ?>

«SEF_BASE_URL» => «/news/», — каталог инфоблока на сайте
«SECTION_PAGE_URL» => «#SECTION_ID#/», — подставляем ID раздела
«DETAIL_PAGE_URL» => «#SECTION_ID#/#ELEMENT_ID#.html», — полный путь к элементу инфоблока
«IBLOCK_TYPE» => «company», — ID типа инфоблока из которого выводим
«IBLOCK_ID» => «21», ID инфоблока из которого выводим
«DEPTH_LEVEL» => «4», уровень вложенности, этой цифрой можно выводить подразделы разделов если иерархия многоуровневая

Дальше нам нужно перейти на визуальную часть сайта и зайти в настройки компоненты меню. Здесь нужно указать следующие параметры. После чего нажать – сохранить.

Надеюсь, что у тебя все получилось, так как делал все пошагово.

Структура сайта

Но для начала, чтобы было из чего составлять меню создадим структуру сайта. Структура сайта, как правило повторяет структуру папок на сайте.
Я пролагаю такую простую структуру:

  • / — главная страница
  • catalog/ — каталог товаров
  • about/ — о сайте
  • contacts/ — контакты
  • delivery/ — информация о доставке

Создавать меню проще всего в момент создания иерархии папок на сайте. Но можно редактировать меню и после того, как структура сайта будет создана. Я это тоже покажу.
Для начала зайдем в админку и посмотрим, какие типы меню заданы по умолчанию. Настройки — Настройка продукта — Настройка модулей — Структура сайта.

Эти типы будут отображаться в верхней панели администрирования в публичной части сайта. Оставим без изменений. Работать будем с верхнем меню (top).
Теперь перейдем в структуру сайта: Контент — Структура сайта — Сайт по умолчанию. И добавим недостающие папки на сайт.

При этом сразу будем указывать привязку к верхнему меню. Нужно заполнить следующем образом форму создания новой папки. Последний флажок снимаем, чтобы не переходить к редактированию файла index.php, который будет создаваться автоматически в каждой папке, нам это пока не нужно.


И так создаем все четыре папки, корневая (главная страница) у нас уже есть. В итоге мы получим следующую структуру папок.

Обратите внимание на два файла в структуре Меню типа «top» и Главная. Если посмотреть структуру через файловый менеджер то увидим следующие файлы.

Т.е. надпись Главная у нас соответствует файлу index.php, а Меню типа «top» файлу меню .top.menu. Тут нужно сразу понять ещё одну особенность CMS Bitrix это то, что практически все настройки и сущности хранятся в файлах. Это отличительная черта Битрикс от других CMS, которые хранят настройки компонентов в базе данных, например пункты меню и настройки этих пунктов в Joomla будут хранится в таблицах базы данных. Битрикс же хранит все по максимуму в файлах. В этом есть определенные плюсы, например, удобно редактировать настройки и отсутствуют лишних обращения к базе данных. Файл меню (.top.menu) имеет следующее содержание.
Код: <?
$aMenuLinks = Array(
Array(
«Каталог»,
«/catalog/»,
Array(),
Array(),
«»
),
Array(
«О сайте»,
«/about/»,
Array(),
Array(),
«»
),
Array(
«Контакты»,
«/contacts/»,
Array(),
Array(),
«»
),
Array(
«Доставка»,
«/delivery/»,
Array(),
Array(),
«»
)
);
?>
Как видите это обычный массив из пунктов меню заданных вложенным массивом. Вы в любой момент можете отредактировать такой файл или создать вручную. Единственное нужно следовать шаблону наименования файла, оно должно быть строго таким, который поймет Битрикс. Т.е. точка впереди, затем наименование на латинском, снова точка и расширение menu (.наименование.menu).

Внедрение верстки меню Foundation

Как мы говорили ранее мы будем работать с CSS-фреймворком Foundation. И из него мы возьмем готовую панель навигации. А заодно и познакомится, как устроена документация Foundation. Чтобы нам получить HTML код панели навигации (Top Menu) нужно перейти на главную страницу документации https:/foundation.zurb.com/sites/docs/ (лучше сразу её добавить в закладки). Слева будет меню с подразделами в которых описан HTML код веб-элементов доступных во фреймворке. Нас интересует все, что ниже разделе Setup. В разделе General описаны классы сетки, напомню мы будем использовать сетку XY Grid. В разделе Typography описаны классы относящиеся к оформлению текста, заголовков и списков.
Нас сейчас будет интересовать раздел Navigation, где описано построение и классы меню, а в нем подраздел Top Menu, в котором описана HTML верстка панели верхнего меню.

Тут же сразу доступен весь требуемый HTML код для вывода меню. Ещё на этом сайте есть очень удобная возможность сразу проверить, как работает описанный пример. Для этого нужно нажать кнопку Edit in Browser и перейти на сайт https:/codepen.io где будет обработан пример и показан результат. Здесь можно вносить доработки и сразу видеть изменения (может пригодится).

Скопируем HTML код и перенесем его в файл header.php. Если вы скачивали готовый шаблон, то у вас уже размещен код вывода меню между комментариями <!— Start Top Bar —>. Меню обернуто в <div class=»grid-container»> эта конструкция Foundation определяет область в которой должны располагаться все остальные HTML элементы. Для вывода панели меню не обязательно обрамлять его тегом сетки <div class=»grid-x»> фреймворк поймет, что это Top Menu и выделит для него отдельную строку. Вот что у нас получится.
Код: <div class=»grid-container»>
<!— Start Top Bar —>
<div class=»top-bar»>
<div class=»top-bar-left»>
<ul class=»dropdown menu» data-dropdown-menu>
<li class=»menu-text»>Site Title</li>
<li>
<a href=»#»>One</a>
<ul class=»menu vertical»>
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a></li>
<li><a href=»#»>Three</a></li>
</ul>
</li>
<li><a href=»#»>Two</a></li>
<li><a href=»#»>Three</a></li>
</ul>
</div>
<div class=»top-bar-right»>
<ul class=»menu»>
<li><input type=»search» placeholder=»Search»></li>
<li><button type=»button» class=»button»>Search</button></li>
</ul>
</div>
</div>
<!— End Top Bar —>
Далее мы заменем эту верстку на вызов компонента bitrix:menu.

Вывод меню Битрикс через компонент bitrix:menu

Чтобы начать кастомизацию любого компонента Битрикс нужно скопировать шаблон компонента в наш шаблон. Изначально шаблоны компонентов, которые доступны с установкой Битрикс хранятся в папке \www\bitrix\components\bitrix\, в случае компонента меню шаблоны будет находится здесь C:\BitrixVM\www\bitrix\components\bitrix\menu\templates. Один из шаблонов нужно скопировать в наш шаблон по пути C:\BitrixVM\www\local\components\bitrix\menu\templates. Можно это сделать руками, а можно воспользоваться возможностями самого Битрикса. Для этого нужно в публичной части сайта вывести компонент bitrix:menu на любой странице сайта и через меню редактирования компонента выполнить копирование шаблона. Так мы и поступим.

Нажмем в панели администрирования Битрикс кнопку Изменить страницу и в форме редактирования страницы в правой части найдем компонент Menu в разделе Служебные — Навигация.
Двойным кликом по пиктограмке компонента откроем его параметры и заполним необходимые. Шаблон оставим по умолчанию, главное для нас будет указать параметр Тип меню — Главное меню.
Сохраним настройки. Можно не сохранять, а сразу перейти в режим просмотра исходного кода и скопировать вызов компонента. Но мы хотим разобраться, как все устроено. По скольку мы редактировали главную страницу то чтобы увидеть код компонента нужно перейти в корень сайта и открыть файл index.php. Скопировать код вызова компонента и разместить его в шапке шаблона в файле header.php заменив им код вывода меню, который у нас был от Foundation. Из индексной страницы вызов компонента сразу нужно удалить, чтобы у нас не дублировалось меню. Вот, что у вас должно получиться.
Код: <body>
<?$APPLICATION->ShowPanel();?>
<div class=»grid-container»>
<!— Start Top Bar —>
<?$APPLICATION->IncludeComponent(«bitrix:menu», «menu-fundation», Array(
«ALLOW_MULTI_SELECT» => «N», / Разрешить несколько активных пунктов одновременно
«CHILD_MENU_TYPE» => «left», / Тип меню для остальных уровней
«DELAY» => «N», / Откладывать выполнение шаблона меню
«MAX_LEVEL» => «1», / Уровень вложенности меню
«MENU_CACHE_GET_VARS» => array( / Значимые переменные запроса
0 => «»,
),
«MENU_CACHE_TIME» => «3600», / Время кеширования (сек.)
«MENU_CACHE_TYPE» => «N», / Тип кеширования
«MENU_CACHE_USE_GROUPS» => «Y», / Учитывать права доступа
«ROOT_MENU_TYPE» => «top», / Тип меню для первого уровня
«USE_EXT» => «N», / Подключать файлы с именами вида .тип_меню.menu_ext.php
),
false
);?>
<!— End Top Bar —>
Теперь нам нужно скопировать шаблон меню в наш каталог. Для этого в панели администрирования включим режим правки, зайдем в управление компонентом и выполним команду копирования шаблона.
Укажем название шаблона и назначение куда будет скопирован шаблон. Удобно шаблоны компонента хранить в самом шаблоне сайта.
Сохраним шаблон. Теперь если мы зайдем в свой шаблон \local\startshop то увидим, что создалась папка components и структура файлов компонента меню.
В принципе все это можно делать и вручную, разницы никакой. Теперь давайте сразу удалим все лишнее оставив только один файл template.php. Кроме него нам ничего не понадобится. И это хороший тон удалять все лишнее из кастомизированных компонентов, чтобы не мешало и не усложняло дальнейшую работу. Если посмотрим на сайт, то меню выводится, но конечно не так, как нам нужно.
Я уже подготовил адаптированный код вывода меню по правилам верстки Foundation. Заменим код вывода шаблона меню на подготовленный код, т.е. заменим код в файле template.php.
Код: <?if (!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?>
<div class=»title-bar» data-responsive-toggle=»responsive-menu» data-hide-for=»medium»>
<button class=»menu-icon» type=»button» data-toggle=»responsive-menu»></button>
<div class=»title-bar-title»>Меню</div>
</div>

<div class=»top-bar large-12 top-bar-my» id=»responsive-menu»>
<div class=»top-bar-left»>
<ul class=»dropdown menu» data-dropdown-menu>
<?foreach($arResult as $key => $item):?>
<li>
<a href=»<?=$item?>»>
<?=$item?>
</a>
</li>
<?endforeach;?>
<div class=»top-bar-right»>
<ul class=»menu»>
<li><input type=»search» placeholder=»Search»></li>
<li><button type=»button» class=»button»>Search</button></li>
</ul>
</div>
</ul>
</div>
</div>
Проверим работу меню. Должно выводится следующим образом.
А вот так будет выглядеть наше меню на телефоне. По нажатию на кнопку Меню отобразятся срытые пункты.

Устройство компонента Bitrix:menu

Разберем работу компонента. Bitrix:menu, наверное самый простой компонент, проще может только хлебные крошки. Вот на его примере и разберем работу компонентов Битрикс.
Первая строчка <?if (!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?> присутствует во всех компонентах Битрикс.Она блокирует открытие файла по прямому вызову. Т.е. если вы попробуете открыть файл компонента просто указав в браузере путь http:/localhost:6449/local/templates/startshop/components/bitrix/menu/menu-fundation/template.php, то ничего не откроется сработает оператор выхода die(). Это защита от попыток взлома и не санкционированного обращения к внутренней логике сайта.
Первым куском кода мы выводим кнопку Меню, которая будет отражена при размере экрана medium, это код из Foundation, который нужно повторить без изменений.
Код: <div class=»title-bar» data-responsive-toggle=»responsive-menu» data-hide-for=»medium»>
<button class=»menu-icon» type=»button» data-toggle=»responsive-menu»></button>
<div class=»title-bar-title»>Меню</div>
</div> Единственное, что может меняться это название кнопки и значение параметра data-hide-for=»medium», который может принимать значения small, medium или large. Этим параметром определяется при каком размере экрана будет свернуто меню.
Далее идет ещё кусок HTML кода в котором определяется тип меню, задается так же DIV с классом top-bar для вывода панели. Собственно все это стоит почитать на сайте Foundation, на верстке я останавливаться сильно не буду. Для того мы и воспользовались фреймворком, чтобы не утруждать себя версткой. Отмечу только класс large-12 им мы определяем размер меню, т.е. меню у нас всегда будет во весь экран занимать все 12 ячеек ряда.
А вот на коде работы с Битрикс мы остановимся подробнее.
Код: <?foreach($arResult as $key => $item):?>
<li>
<a href=»<?=$item?>»>
<?=$item?>
</a>
</li>
<?endforeach;?> Код довольно таки простой по меркам Битрикса. В массив $arResult компонент меню передает массив пунктов меню. Отмечу, что во всех шаблонах компонентов Битрикс результат работы компонента передается в шаблон через массив $arResult, а в массиве $arParams передаются параметры заданные для компонента программно или вручную через настройки, как мы делали выше. Затем выполняется цикл по массиву $arResult при этом полученные значения записываются в переменную $item ($arResult as $key => $item). И ниже в теге <li> выводится ссылка и название пункта уже из именованного массива $item .<?=$item?> вот такой конструкцией в Битриксе принято выводить значения переменных, она аналогична конструкции <?php echo $item?>.
Вот такой небольшой код выводит в цикле данные массива. А вид меню уже определяется исключительно CSS стилями.
От автора:
А на этом пока все. В следующей статье я буду создавать инфоблок и реализовывать вывод каталога товаров. Будет интересно. В комментариях просьба написать понятно излагаю информацию или нет. Ну и не забывайте подписываться, чтобы не пропустить новых статей. До встречи.

Читайте ещё статьи по данному разделу:

18 Июня 2018 Урок 15. Поддержка классов в компонентах Битрикс

10 Июня 2018 Урок 14. Как работает Кеш Битрикс на примере собственного компонента

30 Мая 2018 Урок 13. Bitrix AJAX (запрос средствами Битрикс)

22 Мая 2018 Урок 12. AJAX запрос средствами JQuery в Bitrix

14 Мая 2018 Урок 11. Создание (верстка) шаблона Bitrix

28 Апреля 2018 Урок 10. AJAX корзина Битрикс своими руками

10 Декабря 2017 Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс на CMS-Foundation

29 Ноября 2017 Урок 8. Создание детальной страницы товара в Битрикс

17 Ноября 2017 Урок 7. Параметры компонента битрикс и result_modifier.php

14 Ноября 2017 Урок 6. Вывод каталога товаров в Битрикс через компонент Новости (bitrix:news)

2 Ноября 2017 Урок 5. Инфоблоки битрикс (структура и создание)

26 Октября 2017 Урок 4. Вывод меню битрикс

24 Октября 2017 Урок 2. Установка Битрикс

24 Октября 2017 Урок 3. Создание шаблона 1С Битрикс (Foundation)

23 Октября 2017 Урок 1. Знакомство с CSS-фреймворком Foundation для верстки Битрикс магазина

13 Октября 2017 Уроки создания интернет магазина на Битрикс

И на посошок видео уроки колег с youtube

Возврат к списку

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *