26 октября 2017

Версия для печати

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

Приветствую. Мы продолжаем мелкими шагами разрабатывать наш интернет-магазин на Битрикс и походу знакомится с этой системой. В этой статье я рассмотрю компонент bitrix.menu. Выведем меню и кастомизируем компонент.

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

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

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

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

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

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

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

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

Т.е. надпись Главная у нас соответствует файлу index.php, а Меню типа "top" файлу меню .top.menu. Тут нужно сразу понять ещё одну особенность CMS Bitrix это то, что практически все настройки и сущности хранятся в файлах. Это отличительная черта Битрикс от других CMS, которые хранят настройки компонентов в базе данных, например пункты меню и настройки этих пунктов в Joomla будут хранится в таблицах базы данных. Битрикс же хранит все по максимуму в файлах. В этом есть определенные плюсы, например, удобно редактировать настройки и отсутствуют лишних обращения к базе данных. Файл меню (.top.menu) имеет следующее содержание.
Код:
Как видите это обычный массив из пунктов меню заданных вложенным массивом. Вы в любой момент можете отредактировать такой файл или создать вручную. Единственное нужно следовать шаблону наименования файла, оно должно быть строго таким, который поймет Битрикс. Т.е. точка впереди, затем наименование на латинском, снова точка и расширение 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 и выделит для него отдельную строку. Вот что у нас получится.
Код:
Далее мы заменем эту верстку на вызов компонента 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. Из индексной страницы вызов компонента сразу нужно удалить, чтобы у нас не дублировалось меню. Вот, что у вас должно получиться.
Код:
Теперь нам нужно скопировать шаблон меню в наш каталог. Для этого в панели администрирования включим режим правки, зайдем в управление компонентом и выполним команду копирования шаблона.

Укажем название шаблона и назначение куда будет скопирован шаблон. Удобно шаблоны компонента хранить в самом шаблоне сайта.

Сохраним шаблон. Теперь если мы зайдем в свой шаблон \local\startshop то увидим, что создалась папка components и структура файлов компонента меню.

В принципе все это можно делать и вручную, разницы никакой. Теперь давайте сразу удалим все лишнее оставив только один файл template.php. Кроме него нам ничего не понадобится. И это хороший тон удалять все лишнее из кастомизированных компонентов, чтобы не мешало и не усложняло дальнейшую работу. Если посмотрим на сайт, то меню выводится, но конечно не так, как нам нужно.
Я уже подготовил адаптированный код вывода меню по правилам верстки Foundation. Заменим код вывода шаблона меню на подготовленный код, т.е. заменим код в файле template.php.
Код:
Проверим работу меню. Должно выводится следующим образом.

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

Устройство компонента 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, который нужно повторить без изменений.
Код: Единственное, что может меняться это название кнопки и значение параметра data-hide-for="medium", который может принимать значения small, medium или large. Этим параметром определяется при каком размере экрана будет свернуто меню.
Далее идет ещё кусок HTML кода в котором определяется тип меню, задается так же DIV с классом top-bar для вывода панели. Собственно все это стоит почитать на сайте Foundation, на верстке я останавливаться сильно не буду. Для того мы и воспользовались фреймворком, чтобы не утруждать себя версткой. Отмечу только класс large-12 им мы определяем размер меню, т.е. меню у нас всегда будет во весь экран занимать все 12 ячеек ряда.
А вот на коде работы с Битрикс мы остановимся подробнее.
Код: Код довольно таки простой по меркам Битрикса. В массив $arResult компонент меню передает массив пунктов меню. Отмечу, что во всех шаблонах компонентов Битрикс результат работы компонента передается в шаблон через массив $arResult, а в массиве $arParams передаются параметры заданные для компонента программно или вручную через настройки, как мы делали выше. Затем выполняется цикл по массиву $arResult при этом полученные значения записываются в переменную $item ($arResult as $key => $item). И ниже в теге <li> выводится ссылка и название пункта уже из именованного массива $item .<?=$item['LINK']?> вот такой конструкцией в Битриксе принято выводить значения переменных, она аналогична конструкции <?php echo $item['LINK']?>.
Вот такой небольшой код выводит в цикле данные массива. А вид меню уже определяется исключительно CSS стилями.

От автора:
А на этом пока все. В следующей статье я буду создавать инфоблок и реализовывать вывод каталога товаров. Будет интересно. В комментариях просьба написать понятно излагаю информацию или нет. Ну и не забывайте подписываться, чтобы не пропустить новых статей. До встречи.