Меню в Битриксе: типы, создание и редактирование пунктов меню
Из чего состоит меню Битрикс, на какие типы делится и как формируется? На эти вопросы не так просто ответить не только новичку, но и опытному специалисту. При формировании и внедрении меню, а также редактировании его пунктов нужно быть особенно внимательным.
Что такое меню в 1С-Битрикс и почему его называют наследуемым?
Любое меню на сайте формируется на базе двух элементов:
Меню в Битрикс называют иерархически наследуемым. Связано это с тем, что файлы меню помещаются в папках тех разделов веб-ресурса, где необходим показ соответствующих типов меню. Если для раздела не сформирован соответствующий файл меню, система выполняет поиск сайта в каталоге уровнем выше.
Приведем пример. Основное меню выводится во всех разделах. Следовательно, файл этого меню помещается только в корневой каталог веб-ресурса. Меню же второго уровня отображается отдельно для каждого раздела сайта. В связи с этим в папке каждого раздела формируется свой файл для данного типа меню.
Если в каком-то каталоге найдено меню, процедура поиска завершается и в последующих каталогах уже не выполняется.
Типы меню
Типом меню называют принцип формирования меню. Изначально дистрибутив содержит два типа: левое и верхнее. В зависимости от задач сайта может использоваться нижнее расположение. В каждом компоненте меню применяются два типа: первое – основное, а второе в качестве дополнительного при условии использования шаблонов многоуровневого типа.
Типы меню
В общем случае на сайте есть одно «главное» меню, которое соответствует верхней ступени иерархии. Отображается оно во всех разделах сайта. Также в системе используется меню второго уровня. Оно включает ссылки на подразделы и документы настоящего раздела.
Отображение меню
Меню многоуровневое и наследуемое. Так, если для одного компонента Меню в шаблоне имеется конкретный тип меню, то оно же будет транслироваться ниже на все страницы и разделы сайта вместе с шаблоном. При этом должно соблюдаться условие, что в этих разделах и страницах не было сформированного собственного меню. Такой механизм удобен для основного меню сайта. Обычно ему присваивается тип «Верхнее».
Если вам нужно, чтобы в находящемся ниже разделе не отображалось вышестоящее меню, сформируйте меню в необходимом разделе без формирования в нем пунктов меню.
Каждому разделу присваивается свое меню. Транслируется оно на все страницы раздела. При необходимости в подразделах вы можете создавать собственное меню и применять к нему свой тип.
Виды используемых на веб-ресурсе меню задаются из административного раздела на странице настроек модуля Управление структурой. Допустим, в системе применяются два типа меню:
Настройка типов меню
Статическое меню
В 1С-Bitrix все данные делятся на два типа: статические и динамические. Статическая информация редко меняется с течением времени. Создается и редактируется вручную. Статические данные вводятся непосредственно на странице сайта, а потому меняются редко и вручную.
Динамическая информация хранится в базе данных сайта и выводится специальными компонентами системы. Размещается она с помощью программного кода и редактируется автоматически в зависимости от изменений в источнике данных – информационном блоке. Помимо этого, представленные два типа информации отличаются вариантами хранения, обработки и вывода. Оба вида информации могут быть размещены на одной физической странице. Допускается создание смешанного меню, которое будет содержать как статические, так и динамические пункты.
Какое меню создавать? Тут все зависит от ваших целей и того, что именно вы хотите в нем видеть. Создайте статическое меню, если вам нужен блок, из которого можно переходить в разделы или на страницы сайта. Добавьте названия разделов и страниц, пропишите ссылки на соответствующие папки и файлы из физической структуры сайта. Именно простота является основным преимуществом статического меню.
Статическое меню
Недостаток такого меню – необходимость вручную добавлять новые пункты и ссылки на него. Если же меню горизонтальное, то добавляемый пункт может попросту не поместиться на страницу. В этом случае переделывать придется всю верстку.
Динамическое меню
Используйте динамический блок с пунктами, если вам нужно выпадающее меню, которое будет меняться автоматически при добавлении или изменении информации в каталоге. Клик по пункту будет переводить пользователя на раздел или элемент каталога.
Если раздел содержит несколько элементов, вам не придется создавать для каждого из них физическую страницу и сохранять их в виде файлов. Страница будет сформирована в момент обращения при помощи специального программного кода. Она будет содержать актуальные сведения, а вам не придется следить за этим. Не нужно будет и вносить изменения в публичной части.
Динамическое меню
На примере выше динамическое меню. Для него не требуется создание отдельных пунктов и страниц для отдельных товаров, когда ассортимент пополнится новыми товарами.
Возможен даже вариант совмещения в одном меню разных типов информации. Например, это список услуг вашей компании и контактные сведения. Контакты меняются редко, а услуги с товарами регулярно. В этом случае нужно настроить компонент меню на отображение инфоблока услуг и добавить к нему статические пункты.
Независимо от того, какой тип меню — статический или динамический, — вы выбрали, корректная его работа во многом зависит от скорости сайта. Чтобы не потерять посетителей и конверсии, убедитесь, что сайт работает достаточно быстро. О том, как это сделать, мы писали в статье «Оптимизация сайта на “Битрикс”».
Формирование меню и внедрение его в шаблон сайта
Отметим еще раз: статические данные в структуре сайта – это папки (они же разделы) и файлы (страницы). Динамическая же информация – это инфоблоки (инструменты, с помощью которых в Базу данных заносится информация).
Следовательно, статическое меню:
Что нужно для создания статического меню с последующим внедрением его в шаблон сайта? Алгоритм работы следующий:
По итогу мы получим статическое меню в разделе «Саженцы».
Создать меню динамического типа можно несколькими способами. Первый вариант самый легкий: нужно добавить к каталогу демо-версии сайта собственные разделы и подразделы. Они автоматически попадут в главное меню.
Второй вариант – настройка меню на свой инфоблок. Алгоритм следующий:
Наконец, третий способ. Он предполагает внесение изменений в код. Для этого:
После этого динамическое меню автоматически отобразится в разделе.
Построение меню для показа проходит в три этапа:
Привет! И так, продолжаем разруливать тему «Битрикс». И сегодня посмотрим как на самом деле происходит создание меню на Битрикс. Как это ни странно, но без небольшого багажа знаний и ухищрений этот процесс может вызвать затруднения у многих обывателей, решивших что Битрикс им по зубам:)
Что именно будем делать в этом уроке?
Создадим на сайте 3 типа меню:
Сделаю небольшой экскурс. Так как практически вся работа битрикса (обработка данных и их вывод) основана на различных компонентах, то стоит пояснить с чем мы имеем дело в данном уроке.
Компонент Menu ( bitrix:menu).
Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля. В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню. В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):
Пример вызова
Немного о параметрах, которые вы видите в примере вызова компонента.
DELAY [Y|N] — Откладывает выполнение шаблона меню. При отмеченной опции выполнение шаблона будет происходить после загрузки страницы. Очень удобен при включенном кэшировании компонента, если нужно все же выполнять какие-то действия по модификации внешнего вида пунктов меню в зависимости от текущей страницы. Например, добавление пунктов меню в компонентах.
Стандартный набор параметров впечатляет, правда?)
Перейдем непосредственно к коду!
Если к примеру нужно создать вложенные пункты в пункте About в верхнем меню, можно воспользоваться архитектурой 1С-Битрикс и создать разделы /about/ и /about/profile/, а так же по меню типа «top» в каждом из них (пока не будем создавать страниц, только файловую структуру разделов и меню).
Далее надобно разместить сам компонент меню bitrix:menu на тестовой странице или же где-нибудь в шаблоне, к примеру в footer.php или header.php, в дальнейшем будем работать с ним.
Нижнее меню (bottom)
Этот код вам уже знаком с примера вызова компонента, который мы рассматривали выше. Так как в Битриксе шаблоны компонентов изначально лежат в папках с компонентами, лучше скопировать оригинальный дефолтный шаблон в папку с конкретным общим шаблоном нашего сайта, это надо делать как минимум для того чтобы не портить шаблон ядра компонента и чтобы все наши наработки не слетели при первом же обновлении системы. Поэтому скопируем шаблон компонента под именем «bottom» в шаблон сайта. Хоть это очень лаконичный шаблон, в целях обучения мы не возьмём от него практически ничего:
В этом коде вы можете познакомится со своим другом, который будет вас преследовать на всех этапах разработки на Битрикс, это суперглобальный массив $arResult. В нем хранится все, что может вам понадобится в процессе создания сайта, а то что вы там не найдете можно в любой момент подключить или выбрать с базы благодаря чудо-файлу result_modifier.php, который находится в папке шаблона каждого компонента.Если в изначальной сборке вы его не обнаружили ничего страшного, его всегда можно создать и использовать на свое усмотрение.
Создается этот файл еще и для того, чтобы отделить логику от верстки, то есть обработав всю логику в файле result_modifier.php все полученные данные будут доступны для вывода в шаблоне компонента (файл template.php).
Поставим этот код сразу после начала цикла и сохраним шаблон. Основное, на что нам надо обратить внимание, это параметры:
Параметр [SELECTED] не пуст тогда, когда пункт меню соответствует нашему местонахождению в структуре сайта, то есть когда пункт выбран. Значит, мы легко можем использовать его для вывода нужного нам стиля, к примеру:
Параметр [ITEM_INDEX] отражает номер пункта меню в массиве. Вся хитрость в том, что мы можем использовать его для простановки разделителей между главными пунктами меню. Слегка подкорректируем вёрстку и выведем разделитель следующим кодом:
В итоге, на данном этапе, соединив все в кучу, шаблон компонента меню будет выглядеть так:
Также мы смело можем удалить лишние файлы, который нам достались при копировании оригинального шаблона .default.
Теперь размещаем вызов компонента нижнего меню вместо статики в шаблоне, которую я указывал ранее. Не забываем указывать тип и время кэширования, если конечно оно вам надо:)
Вуаля!) Простое нижнее меню готово, причем мы успели сделать разделители между пунктами, а также сделали возможность выделять активный пункт, заняло это всего две строчки кода, поэтому все очень быстро и удобно, главное понять логику работы компонента.
Редактирование МЕНЮ в 1С Битрикс
Дополнительное видео
В данной статье подробно разберем:
Начинающий пользователь сталкивается с проблемой не понимания, как меню формируется и выводится на сайте, как его изменить и добавить в него свои разделы.
При работе с меню в 1С Битрикс появляются вопросы почему какие-то пункты не отображаются, какие-то не подлежат изменению?
В документации 1C битрикса не каждый разберется, так как для ее осознания нужно не просто прочитать, а обязательно отработать прочитанный материал. Не у каждого есть возможность это сделать, да и времени уйдет довольно много, что бы осознать и понять, как это все работает, и это ради пару добавлений разделов которые возможно в дальнейшем и трогать не придется.
Я перед собой поставил задачу, как можно подробней рассказать и показать на примерах, как это все устроено. Дочитав статью до конца, Вы научитесь, редактирования меню в системе Битрикс, поймете, что в этом нечего сложного нет, а вот, получится у меня это сделать или нет, я узнаю по вашим комментариям.
В данном выпуске разберем, как управлять меню в CMS Битрикс, расскажу, какие есть его типы, каким образом оно функционирует, как с ним работать через административный раздел и визуальную часть сайта, а заключительным моментом создать меню с нуля, подключим к шаблону, и отобразим компонентом в визуальной части сайта.
Обо всем этом читайте далее…
Что такое меню в 1С Битрикс?
Само по себе меню, как и везде, это элемент дизайна, при помощи которого мы упрощаем навигацию по сайту. Их может быть множество типов, верхнее, нижнее, левое и т.д., но в системе используются по умолчанию два, левое и правое меню, и это не мешает добавлять нам остальные типы при их необходимости.
Также меню разделяется на основное и второстепенное. Основное меню соответствует самому верхнему уровню, второстепенное меню содержит ссылки на подразделы и документы текущего раздела.
Основной момент, который вы должны уловить, что меню в системе наследуется. То есть, если выбираем в компоненте определенный тип меню, то это меню будет отображаться, ниже на все разделы и страницы сайта, до момента пока в нем не создадим собственное меню.
Думаю мало, кто понял, что я тут написал, но давайте подробно разберемся.
Что такое тип меню?
Для примера создадим свой тип меню, которого в системе сейчас нет, присвоим ему тип « right » и назовем «Правое меню», сохранимся. После этих сохраннений у нас будет возможность выбирать в компоненте «Правое меню», а также выбирать этот тип в момент формирования раздела.
Вернемся на главную страницу и создадим в ней раздел с названием «DWS Меню», установим его отображение в верхнем меню сайта.
При помощи административной панели выбираем «Создать раздел», в нем оставляем настройки по умолчанию, жмем далее, тип меню выбираем «Верхнее меню», хотя заметьте, появился другой тип «Правое меню» который мы до этого создавали. Его задействуем немного позже, жмем далее, и готово.
На страничке пропишу тестовый текст (Основы управления меню в системе 1С Битрикс) и сохраняю форму.
И так, система перенаправили на вновь созданную нами страницу, и отобразился пункт в верхнем меню «DWS Меню» который мы создавали. Прогуливаясь по разделам сайта, этот пункт не изменчив и везде присутствует, это все благодаря тому что другие его разделы унаследовали.
Разбор отображения меню
Теперь давайте подробно разберемся, каким образом меню отображается.
Любое меню в 1С Битрикс строится на основе двух составляющих:
И давайте далее разберем более подробнее каждый из пунктов.
Статическое Меню / Массивом данных «$aMenuLinks»
Как я упоминал в начале, любое меню наследуется, то есть все разделы отображают его в том виде, в котором оно находится в главной директории. Если необходимо изменить пункты меню в определенном разделе, для этого достаточно скопировать этот файл с определенным типом, в раздел где по иному меню должно отображаться, и далее его можно отредактировать в визуальной части сайта. После этого оно применится к текущем разделу и его подразделам.
Другой из вариантов, достаточно перейти в раздел где формируем меню, жмем кнопку создать и повторно описываем всю структуру.
Для примера мы и создали тестовый раздел, на котором продемонстрирую данные операции.
Перейдя в новый раздел DWS меню, мы видим полное отображение верхнего меню, в принципе, как и в других разделах.
Допустим, мы хотим заменить несколько пунктов меню, а возможно и некоторые из текущего списка исключить.
Можно пойти несколькими вариантами как упоминал выше, находясь в данной директории создать меню, при помощи административной панели, жмем кнопку меню, выбираем тип меню, который хотим создать, в нашем случае «Верхнее меню», по нажатию на ней появилась форма, где система предлагает заполнить название разделов и его ссылку. Тут обратите внимание, что меню создается в разделе (dws-menu). Если его создать в другом разделе оно применится к тому, в котором мы его создаем. Так же оно будет наследоваться всеми разделами, включенными в данную директорию.
Для примера давайте заполним форму тестовыми данными и сохранимся.
Появились пункты, которые мы формировали, переходя по другим разделам, эти пункты не отображаются.
Удалив вновь созданное меню, оно приобретает прежний вид.
Далее открываем меню на редактирование, я воспользуюсь кнопкой меню на панели администратора, выбираю «тип меню» которое буду редактировать, открывается форма со списками разделов. Где в первую очередь укажем ссылки именно с этой директории.
Таким образом, если нам нужно отредактировать нижнее меню, копируем данный «Тип меню» в наш раздел.
Отредактируем его при помощи режима правки, наводим на меню, жмем «Редактировать пункты меню», изменяем ссылки, для примера удаляем пару пунктов, сохраняемся.
Я думаю с этим проблем быть не должно, тут все предельно понятно.
Динамическое меню / Файл с приставкой _ext.php
Теперь разберемся со следующим моментом. Возможно, у вас возникают ситуации, что в момент редактирования не все пункты меню отображаются в надлежащем виде. Как, к примеру, в нашем случае с верхним меню.
Этот файл расположен в основной директории, все последующие разделы просто наследуют его и выводят в этом виде. Если сейчас мы его скопируем в наш раздел, отредактируем его параметры, к примеру, удалим всю информацию, то из верхнего меню эти пункты в нашем разделе пропадут. Перемещаясь по другим разделам, оно будет отображаться прежним.
Вывод меню на странице сайта
Отображения меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu).
Нам достаточно скопировать его код и поместить в область сайта, что бы оно там отобразилось.
Давайте для закрепления материала создадим свое меню, расположим его в правой части сайт-бара, внесем небольшие правки в верстку, отобразим его в нашем разделе, и пропишем определенные пункты.
Создание меню и внедрение его в шаблон сайта
Что бы вставить меню, нам нужен код компонента, который его вызывает. Для этого откроем страницу на редактирование, затем, выберу из служебных компонентов «navigation», «Меню», перетаскиваю его в форму, в настройках оставляю все по умолчанию, жмем сохранить.
Открываю форму в режиме кода, вырезаю данный компонент, и закрываю окно.
«Основы управления меню в системе 1С Битрикс.»
Далее следующим этапом вставим наш код в правый сайт бар.
Открываю в браузере режим кода, смотрю где формируется данный блок, затем перехожу в настройки продукта, сайты, шаблон сайтов. В структуре нахожу блок, куда его нужно вставить, в моем случае вставляю после компонента с поиском на сайте, и сохраняюсь.
Переходим в визуальную часть, у нас появилась такая иконка, символизирующая, что есть компонент. По заданию меню нужно отобразить только в нашем разделе, для этого переходим в «DWS меню», и тут можно создать его несколькими способами:
Как видите, на самом деле в Битриксе меню довольно просто формируется и управляется, не нужно обладать знаниями программирования что бы добавить меню того или иного содержания, достаточно просто еще раз внимательно прочитать статью.