Меню

1С УПРАВЛЕНИЕ ТОРГОВЛЕЙ И ИНТЕРНЕТ-МАГАЗИН БИТРИКС

26 Октября 2017

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

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

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

Но для начала, чтобы было из чего составлять меню создадим структуру сайта. Структура сайта, как правило повторяет структуру папок на сайте.
Я пролагаю такую простую структуру:
  • / - главная страница
  • catalog/ - каталог товаров
  • about/ - о сайте
  • contacts/ - контакты
  • delivery/ - информация о доставке
Создавать меню проще всего в момент создания иерархии папок на сайте. Но можно редактировать меню и после того, как структура сайта будет создана. Я это тоже покажу.
Для начала зайдем в админку и посмотрим, какие типы меню заданы по умолчанию. Настройки - Настройка продукта - Настройка модулей - Структура сайта.

Битрикс типы меню

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

Добавить папку в структуру битрикс

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

Битрикс создание папки


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

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

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

Структура файлов StartShop

Т.е. надпись Главная у нас соответствует файлу 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).

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

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

Панель навигации Fundation

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

Отладка CSS JS кода on-line

Скопируем HTML код и перенесем его в файл header.php. Если вы скачивали готовый шаблон, то у вас уже размещен код вывода меню между комментариями <!-- Start Top Bar -->. Меню обернуто в <div class="grid-container"> эта конструкция Fundation определяет область в которой должны располагаться все остальные 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 в разделе Служебные - Навигация.

Битрикс изменить страницу

Двойным кликом по пиктограмке компонента откроем его параметры и заполним необходимые. Шаблон оставим по умолчанию, главное для нас будет указать параметр Тип меню - Главное меню.

Параметры компанента bitrix-menu

Сохраним настройки. Можно не сохранять, а сразу перейти в режим просмотра исходного кода и скопировать вызов компонента. Но мы хотим разобраться, как все устроено. По скольку мы редактировали главную страницу то чтобы увидеть код компонента нужно перейти в корень сайта и открыть файл index.php. Скопировать код вызова компонента и разместить его в шапке шаблона в файле header.php заменив им код вывода меню, который у нас был от Fundation. Из индексной страницы вызов компонента сразу нужно удалить, чтобы у нас не дублировалось меню. Вот, что у вас должно получиться.
Код:
<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. Кроме него нам ничего не понадобится. И это хороший тон удалять все лишнее из кастомизированных компонентов, чтобы не мешало и не усложняло дальнейшую работу. Если посмотрим на сайт, то меню выводится, но конечно не так, как нам нужно.
Я уже подготовил адаптированный код вывода меню по правилам верстки Fundation. Заменим код вывода шаблона меню на подготовленный код, т.е. заменим код в файле 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['LINK']?>">
              <?=$item['TEXT']?>
              </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>


Проверим работу меню. Должно выводится следующим образом.

Магазин StartShop в меню


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

Магазин StartShop в меню на телефоне


Устройство компонента 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, это код из Fundation, который нужно повторить без изменений.
Код:
<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 для вывода панели. Собственно все это стоит почитать на сайте Fundation, на верстке я останавливаться сильно не буду. Для того мы и воспользовались фреймворком, чтобы не утруждать себя версткой. Отмечу только класс large-12 им мы определяем размер меню, т.е. меню у нас всегда будет во весь экран занимать все 12 ячеек ряда.
А вот на коде работы с Битрикс мы остановимся подробнее.
Код:
    <?foreach($arResult as $key => $item):?>
      <li>
              <a href="<?=$item['LINK']?>">
              <?=$item['TEXT']?>
              </a>
      </li>
   <?endforeach;?>
Код довольно таки простой по меркам Битрикса. В массив $arResult компонент меню передает массив пунктов меню. Отмечу, что во всех шаблонах компонентов Битрикс результат работы компонента передается в шаблон через массив $arResult, а в массиве $arParams передаются параметры заданные для компонента программно или вручную через настройки, как мы делали выше. Затем выполняется цикл по массиву $arResult при этом полученные значения записываются в переменную $item ($arResult as $key => $item). И ниже в теге <li> выводится ссылка и название пункта уже из именованного массива $item .<?=$item['LINK']?> вот такой конструкцией в Битриксе принято выводить значения переменных, она аналогична конструкции <?php echo $item['LINK']?>.
Вот такой небольшой код выводит в цикле данные массива. А вид меню уже определяется исключительно CSS стилями.

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

Комментарии

Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
31.10.2017 | макс

Здрасти, в 4:30 пришло оповещение, что вышла новая статья по битрикс, а как ее найти на сайте?)

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
31.10.2017 | Администратор

Максим, пока новых статей нет. Вы все новые прочитали. У меня не работала рассылка и поэтому сейчас в течении нескольких дней отправлю сообщения о вышедших 4 уроках. Сейчас я пишу Урок 5 об инфоблоках, скоро выйдет, подождите немного.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
27.10.2017 | макс

Всё понятно. Только у вас последовательность немного не верная. Если сразу ввести в код название шаблона до создания шаблона, то суопировать шаблон не получится. Т.е. вы хотите дефолтовый копировать, а у вас он уже названа по другому. Битрикс ошибку выведет. Я последовательно всё делаю, поэтому это видно, когда вначале делаешь, а потом объясняешь, это можно пропустить. спасибо.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
27.10.2017 | Администратор

Посмотрю, спасибо за замечание. А вы меня из поиска нашли?

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть
27.10.2017 | макс

кажется да, но уже точно не помню.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть


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