Иногда (а если быть честным довольно часто) возникает необходимость кастомизировать родной шаблон компонента Битрикс. В данном уроке мы научимся интегрировать верстку на примере главного меню.
Создаем тестовую страницу в рамках нашего проекта:
Прописываем заголовок для страницы, имя файла и убираем галку "Добавить пункт меню":
Отлично! Страница создана. Теперь выбираем пункт "Изменить страницу":
Удаляем текст установленный системой по умолчанию и выбираем компонент "Меню":
В параметрах компонента выставляем нужные значения и нажимаем "Сохранить":
Вот что в итоге должно у нас получиться:
Как можно заметить нижнее меню сильно отличается от того, которое у нас есть в шаблоне, однако беспокоиться не стоит. Следующий шаг - это копирование шаблона компонента в папку с нашим шаблоном. Масло масляное, но именно так и нужно сделать)
Копирование делается вот так:
Выставляем нужные параметры и сохраняем изменения:
Возможно Вы зададитесь вопросом: "А для чего вообще необходимо копировать исходный шаблон компонента?" Ответ очень простой: это нужно для того чтобы при очередном обновлении платформы все внесенные в него ранее изменения не удалились.
Папку с шаблоном меню можно будет найти по адресу: папка local→templates→папка с названием вашего шаблона→components→bitrix→menu:
Теперь двойным щелчком открываем файл template.php:
Т.о. перед Вами откроется файл с исходным кодом шаблона:
Здесь нужно будет немного отступить вниз и в свободное место поместить верстку для будущего меню (в моем случае это весь код заключенный в <div> с классом "menu popup-block"):
Внимательно изучим имеющийся у нас код, основное внимание нужно заострить на этих моментах:
Т.е. вверху у нас есть <div> с определенным классом, тег <ul> также содержит класс, но без какого-либо значения, далее идет тег <li> с классом "mane-page". В самом низу верстки мы имеем ссылку и закрывающий тег </div>. Все остальные элементы списка не имеют никаких классов. Отлично, теперь нам остается только перенести все эти моменты в наш шаблон. Начнем с тегов <div>, <ul>, <li> и <a>, вот что должно получиться:
И в завершение всего нужно будет убрать все лишнее в тегах <li>:
После этого удалите всю ранее скопированную верстку и сохраните файл (можно воспользоваться комбинацией клавиш ctrl+s):
Остается только перейти на сайт, скопировать код вызова шаблона компонента и вставить его вместо использованной ранее верстки. Нажимаем на "Изменить страницу", переходим на вторую вкладку в редакторе и копируем имеющийся в ней код:
Вставляем его в хедере именно там где он необходим:
Сохраняем изменения и смотрим что получилось:
Все отлично, мы получили рабочее меню, которое точь-в-точь совпадаем по дизайну с тем что было у нас изначально.
Ссылка на экзаменационные билеты и материалы для подготовки (там как раз есть шаблон сайта представленный выше).
Также Вас может заинтересовать:
#менюбитрикс #главноеменю #интеграцияверстки #шаблонкомпонента
Спасибо за внимание!
Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.