26 Октября 2017
Я пролагаю такую простую структуру:
Для начала зайдем в админку и посмотрим, какие типы меню заданы по умолчанию. Настройки - Настройка продукта - Настройка модулей - Структура сайта.
Эти типы будут отображаться в верхней панели администрирования в публичной части сайта. Оставим без изменений. Работать будем с верхнем меню (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. Если вы скачивали готовый шаблон, то у вас уже размещен код вывода меню между комментариями . Меню обернуто в
Версия для печати
Урок 4. Вывод меню битрикс
Приветствую. Мы продолжаем мелкими шагами разрабатывать наш интернет-магазин на Битрикс и походу знакомится с этой системой. В этой статье я рассмотрю компонент bitrix.menu. Выведем меню и кастомизируем компонент.Структура сайта
Но для начала, чтобы было из чего составлять меню создадим структуру сайта. Структура сайта, как правило повторяет структуру папок на сайте.Я пролагаю такую простую структуру:
- / - главная страница
- 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. Если вы скачивали готовый шаблон, то у вас уже размещен код вывода меню между комментариями . Меню обернуто в
эта конструкция Foundation определяет область в которой должны располагаться все остальные HTML элементы. Для вывода панели меню не обязательно обрамлять его тегом сетки
фреймворк поймет, что это Top Menu и выделит для него отдельную строку. Вот что у нас получится.
Код:
Далее мы заменем эту верстку на вызов компонента bitrix:menu.
Нажмем в панели администрирования Битрикс кнопку Изменить страницу и в форме редактирования страницы в правой части найдем компонент Menu в разделе Служебные - Навигация.
Двойным кликом по пиктограмке компонента откроем его параметры и заполним необходимые. Шаблон оставим по умолчанию, главное для нас будет указать параметр Тип меню - Главное меню.
Сохраним настройки. Можно не сохранять, а сразу перейти в режим просмотра исходного кода и скопировать вызов компонента. Но мы хотим разобраться, как все устроено. По скольку мы редактировали главную страницу то чтобы увидеть код компонента нужно перейти в корень сайта и открыть файл index.php. Скопировать код вызова компонента и разместить его в шапке шаблона в файле header.php заменив им код вывода меню, который у нас был от Foundation. Из индексной страницы вызов компонента сразу нужно удалить, чтобы у нас не дублировалось меню. Вот, что у вас должно получиться.
Код:
$APPLICATION->ShowPanel();?>
$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
);?>
Теперь нам нужно скопировать шаблон меню в наш каталог. Для этого в панели администрирования включим режим правки, зайдем в управление компонентом и выполним команду копирования шаблона.
Укажем название шаблона и назначение куда будет скопирован шаблон. Удобно шаблоны компонента хранить в самом шаблоне сайта.
Сохраним шаблон. Теперь если мы зайдем в свой шаблон \local\startshop то увидим, что создалась папка components и структура файлов компонента меню.
В принципе все это можно делать и вручную, разницы никакой. Теперь давайте сразу удалим все лишнее оставив только один файл template.php. Кроме него нам ничего не понадобится. И это хороший тон удалять все лишнее из кастомизированных компонентов, чтобы не мешало и не усложняло дальнейшую работу. Если посмотрим на сайт, то меню выводится, но конечно не так, как нам нужно.
Я уже подготовил адаптированный код вывода меню по правилам верстки Foundation. Заменим код вывода шаблона меню на подготовленный код, т.е. заменим код в файле template.php.
Код:
Проверим работу меню. Должно выводится следующим образом.
А вот так будет выглядеть наше меню на телефоне. По нажатию на кнопку Меню отобразятся срытые пункты.
Первая строчка присутствует во всех компонентах Битрикс.Она блокирует открытие файла по прямому вызову. Т.е. если вы попробуете открыть файл компонента просто указав в браузере путь 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). И ниже в теге выводится ссылка и название пункта уже из именованного массива $item .=$item['LINK']?> вот такой конструкцией в Битриксе принято выводить значения переменных, она аналогична конструкции .
Вот такой небольшой код выводит в цикле данные массива. А вид меню уже определяется исключительно CSS стилями.
От автора:
А на этом пока все. В следующей статье я буду создавать инфоблок и реализовывать вывод каталога товаров. Будет интересно. В комментариях просьба написать понятно излагаю информацию или нет. Ну и не забывайте подписываться, чтобы не пропустить новых статей. До встречи.
Код:
Далее мы заменем эту верстку на вызов компонента 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. Из индексной страницы вызов компонента сразу нужно удалить, чтобы у нас не дублировалось меню. Вот, что у вас должно получиться.
Код:
$APPLICATION->ShowPanel();?>
$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
);?>
Теперь нам нужно скопировать шаблон меню в наш каталог. Для этого в панели администрирования включим режим правки, зайдем в управление компонентом и выполним команду копирования шаблона.
Укажем название шаблона и назначение куда будет скопирован шаблон. Удобно шаблоны компонента хранить в самом шаблоне сайта.
Сохраним шаблон. Теперь если мы зайдем в свой шаблон \local\startshop то увидим, что создалась папка components и структура файлов компонента меню.
В принципе все это можно делать и вручную, разницы никакой. Теперь давайте сразу удалим все лишнее оставив только один файл template.php. Кроме него нам ничего не понадобится. И это хороший тон удалять все лишнее из кастомизированных компонентов, чтобы не мешало и не усложняло дальнейшую работу. Если посмотрим на сайт, то меню выводится, но конечно не так, как нам нужно.
Я уже подготовил адаптированный код вывода меню по правилам верстки Foundation. Заменим код вывода шаблона меню на подготовленный код, т.е. заменим код в файле template.php.
Код:
Проверим работу меню. Должно выводится следующим образом.
А вот так будет выглядеть наше меню на телефоне. По нажатию на кнопку Меню отобразятся срытые пункты.
Устройство компонента Bitrix:menu
Разберем работу компонента. Bitrix:menu, наверное самый простой компонент, проще может только хлебные крошки. Вот на его примере и разберем работу компонентов Битрикс.Первая строчка присутствует во всех компонентах Битрикс.Она блокирует открытие файла по прямому вызову. Т.е. если вы попробуете открыть файл компонента просто указав в браузере путь http:/localhost:6449/local/templates/startshop/components/bitrix/menu/menu-fundation/template.php, то ничего не откроется сработает оператор выхода die(). Это защита от попыток взлома и не санкционированного обращения к внутренней логике сайта.
Первым куском кода мы выводим кнопку Меню, которая будет отражена при размере экрана medium, это код из Foundation, который нужно повторить без изменений.
Код:
Далее идет ещё кусок HTML кода в котором определяется тип меню, задается так же DIV с классом top-bar для вывода панели. Собственно все это стоит почитать на сайте Foundation, на верстке я останавливаться сильно не буду. Для того мы и воспользовались фреймворком, чтобы не утруждать себя версткой. Отмечу только класс large-12 им мы определяем размер меню, т.е. меню у нас всегда будет во весь экран занимать все 12 ячеек ряда.
А вот на коде работы с Битрикс мы остановимся подробнее.
Код: Код довольно таки простой по меркам Битрикса. В массив $arResult компонент меню передает массив пунктов меню. Отмечу, что во всех шаблонах компонентов Битрикс результат работы компонента передается в шаблон через массив $arResult, а в массиве $arParams передаются параметры заданные для компонента программно или вручную через настройки, как мы делали выше. Затем выполняется цикл по массиву $arResult при этом полученные значения записываются в переменную $item ($arResult as $key => $item). И ниже в теге выводится ссылка и название пункта уже из именованного массива $item .=$item['LINK']?> вот такой конструкцией в Битриксе принято выводить значения переменных, она аналогична конструкции .
Вот такой небольшой код выводит в цикле данные массива. А вид меню уже определяется исключительно CSS стилями.
От автора:
А на этом пока все. В следующей статье я буду создавать инфоблок и реализовывать вывод каталога товаров. Будет интересно. В комментариях просьба написать понятно излагаю информацию или нет. Ну и не забывайте подписываться, чтобы не пропустить новых статей. До встречи.
Комментарии
Подскажите по инфоблокам... переношу сайт на битрикс... на старом сайте была отличная структура от битрикса и категории не находились в инфоблоке каталог.... домен.ру/каталог группы товаров/товар Хочу сделать для каждого раздела товаров отдельный инфоблок в названием категории товара... с целью сделать ссылки на сайте короче... и угодить поисковикам. Чем это может быть черевато? Затруднен будет импорт/экспорт? Связь с 1С? Или может еще чтото? Дайте свой совет.
Проблем с обменом 1С быть не должно, 1С может выгружать в разные инфоблоки разный список товара по отбору. Но вот как вы будите выводить каталог на сайт из разных инфоблоков это вопрос. Компонент bitrix.catalog так не умеет. Придется или сильно все перерабатывать или под каждую категорию создавать папку на сайте и там размещать компонент. Мне кажется идея иметь каталог товаров в разных инфоблоках не очень хорошая. Вобще в битриксе настройки ЧПУ очень гибкие, вы какие URL хотите получить для товара и для раздела?
Хочу получать для раздела: домен.ру/раздел1 домен.ру/раздел2 Для товара: домен.ру/раздел1/товар1 домен.ру/раздел1/товар2 Как избавится от посредника catalog без ущерба структуре битрикса? (домен.ру/catalog/раздел1/товар1) Буду очень благодарен.
Единственное может быть проблема с решениями (шаблонами Битрикс), т.к. в них именно по наличию в пути фразы "catalog/" определяется, что открыт каталог и выполняются условия в зависимости от этого. Например у одного клиента из-за собственных настроек ЧПУ не работает модуль сравнения + ещё приходилось подправлять моменты в шаблоне. Т.е. нужно понимать, что отход от общепринятого стандарта повлечет за собой дополнительные сложности.
Это настройки компонента. Для компонента bitrix.catalog будет тоже самое. Т.е. суть что отталкиваться нужно от корня сайте "/". К тому же каталог можно разместить сразу в корне сайта в файле index.php тогда и перенаправления не будет.
В этом нет никаких сложностей. Посмотри мой блог, строки "blog" нету в адресе, хотя физически компонент новости располагается в папке blog. Посмотри настройки ЧПУ на картинках.
Вы занимаетесь доработкой шаблонов интернет магазинов на битрикс? Можно с вами поработать в этом направлении. Скайп nom1515
Здрасти, в 4:30 пришло оповещение, что вышла новая статья по битрикс, а как ее найти на сайте?)
Максим, пока новых статей нет. Вы все новые прочитали. У меня не работала рассылка и поэтому сейчас в течении нескольких дней отправлю сообщения о вышедших 4 уроках. Сейчас я пишу Урок 5 об инфоблоках, скоро выйдет, подождите немного.
Всё понятно. Только у вас последовательность немного не верная. Если сразу ввести в код название шаблона до создания шаблона, то суопировать шаблон не получится. Т.е. вы хотите дефолтовый копировать, а у вас он уже названа по другому. Битрикс ошибку выведет. Я последовательно всё делаю, поэтому это видно, когда вначале делаешь, а потом объясняешь, это можно пропустить. спасибо.
Посмотрю, спасибо за замечание. А вы меня из поиска нашли?
кажется да, но уже точно не помню.