Вертикальное меню «Производители» в 1С-Битрикс

 

На прошлом этапе, мы определились какие компоненты у нас будут отвечать за ту или иную область шаблона. В данном посте мы рассмотрим как реализовать вертикальное меню «производители».

 

Вертикальное меню «производители»

 

Как я указал на этапе “подбор компонентов для шаблона“, за вертикальное меню «производители» у нас будет отвечать компонент «bitrix:menu», мы настроим его таким образом, что-бы он отображал список разделов инфоблока «процессоры» (инфоблок «процессоры» мы создали когда говорили о реализации каталога (витрины) магазина, посмотреть можно по ссылке)

    1. Создаем разделы с производителями в инфоблоке «Процессоры». В панели администратора выбираем в левой колонки «Магазин», далее разворачиваем «Каталог товаров» -> «Процессор» — > «Разделы», жмем «Добавить раздел».Откроется окно редактирования разделаpanel_admin_infoblock_section_smallНапишем в поле «Название» имя производителя и нажмем «Сохранить».Добавлю по аналогии еще один раздел «AMD».Итак у нас есть два раздела:panel_admin_infoblock_sections_smallРаспределим элементы инфоблока «Процессоры» по данным двум разделам. Для этого перейдем на «Список товаров», далее выберем один из элементов, нажмем на вкладку «Разделы» и выделим раздел, к которому надо отнести данный элемент. Как пример процессор «AMD FX Vishera» я отнес к разделу «AMD»:panel_admin_infoblock_element_section_small
      Повторяем так для каждого элемента.

 

    1. Создадим пользовательский шаблонСкопируем шаблон «vertical_multilevel» компонента «bitrix:menu» в папку с пользовательскими шаблонами компонентов, т.е. в www\bitrix\templates\test\components\bitrix\menu. Переименуем наш шаблон в «my_vertical_multilevel» (вы можете назвать его как угодно, суть от этого не меняется)

 

    1. Найдем фрагмент html, отвечающий за вывод вертикального меню «производители», у меня он распологается в footer.php:

 

  1. Заменим html код в шаблоне на вызов компонента «bitrix:menu» с нашим шаблоном «my_vertical_multilevel».

     

    Параметры на которые стоит обратить внимание:

     

    ROOT_MENU_TYPE — Указывает к какому типу отнести данное меню, от типа зависит какой файл будет считываться для формирования пунктов меню.

    Если указанно top, то данный компонент считывает файл .top.menu.php

    если left, то .left.menu.php

    вообщем если тип, то .тип.menu.php

     

    USE_EXT – Указывает разрешить или запретить подключать файлы «тип.menu_ext.php». Помимо файла «.тип.menu.php» в формирование меню, может учавствовать (при его наличии) файл «.тип.menu_ext.php». Разница заключается в том,  что «.тип.menu.php» содержит массив с названиями и ссылкам адресованным к разделам сайта (директориям в www), а в «тип.menu_ext.php» находится вызов компонента «bitrix:eshop.menu.sections» с нужными нам параметрами, который возвращает массив с именами разделов и подразделов в инфоблоке. Получается что «.тип.menu.php» отвечает за формирование пунктов меню относящиеся к разделам сайта, а «тип.menu_ext.php» относящиеся к разделам инфоблоков.

     

    Т.к. в нашем случае мы разделили товары по производителям с помощью разделов инфоблока, то нам для нашего вертикального меню достаточно будет только «.right.menu_ext.php», который мы поместим в каждый физический разделы нашего сайта.

     

    Тут важно сказать что «типы меню»: left, top и т.п. в CMS заранее определены в модуле «Управление структурой». По умолчанию типа «right» нет, нам необходимо его создать, для этого в панели администратора нажмем на «Настройки» и раскроем «Настройки продукта» -> «Настройки модулей» -> «Управление структурой».

     

    Откроется окно, впишем в него новый типо «right»
    panel_admin_new_type_menu_small

    И нажмем сохранить

  2. Правим шаблон www\bitrix\templates\имя_шаблона\components\bitrix\menu\my_vertical_multilevel\template.phpУрезав все лишнее и добавив HTML код вертикального меню «Manufacturers» шаблона- прототипа у меня получился следующий пользовательский шаблон:
     

     

  3. Создадим файл «.right.menu_ext.php» в «www» и наполним его следующим содержимым:

     

    Где параметр «IBLOCK_TYPE_ID» указывает на тип инфоблока, узнать ID можно, если перейти на «Контент» и нажать на «Типы инфоблоков» («Типы инфоблоков» находиться в «Инфоблоки»).

    Размножьте данный файл по всем физическим разделам сайта (подпапкам www), или по тем разделам где необходимо отображение данного меню.

    P.S. Операционная система, в которые вы сейчас работаете, возможно, может не разрешить создать файл «.right.menu_ext.php», т.к. в начале его имени присутствует точка (например в Windows). Если это так, создайте данный файл через панель администратора, нажмите на «Контент», далее раскройте «Структура сайта», выберите «Файлы и папки», перейдите в нужный раздел и нажмите на «Добавить», далее «Добавить файл».

    P.S. Если в одном типе у вас несколько инфоблоков и вам нужно вывести список разделов конкретного инфоблока, тогда вместо «bitrix:eshop.menu.sections» используйте компонент «bitrix:menu.sections» (параметр «IBLOCK_ID» отвечает за выбор инфоблока по ID).

    * P.S. В том случае, если компонент «bitrix:menu» выводит неправильные URL разделов, это значит, что вы неверно указали «URL страницы разделов» в настройках инфоблока, в данном случае инфоблока «Процессоры».
    Настроить URL раздела вы можете в панели администратора нажав на «Контент», далее развернуть «Инфоблоки» -> «Типы инфоблоков» далее разверните ваш тип инфоблока и выберите инфоблок. Нажмите на «решетку» слева от имени и выберите «Изменить». Откроется окно:

    panel_admin_infoblock_section_URL

    В красном квадрате указывается URL до раздела, собирается адрес из заранее установленных переменных (начинаются и заканчиваются знаком #) и простых строк. В указанном выше случае URL адрес раздела будет такой:

    http:// ваше_доменное_имя /index.php?SECTION_ID= номер_раздела

 

 

Посмотрим в браузере результат кастомизации компонента «bitrix:menu»

 

templeate_component_manufacturers

 

 

Компонент визуально полностью совпадает с меню «Manufacturers» в шаблоне-прототипе, интеграцию компонента можно считать завершенной.




Буду признателен если вы поделитесь данным постом


Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены