Заказать
Заказать

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Изучим непростой компонент меню. В ходе статьи создадим компоненты, и интегрируем в наш шаблон.

Создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Через админку переходим в раздел «Настройки» в меню слева:

  1. «Настройка модулей»;
  2. «Управление структурой».
Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню через админку

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «тип меню» в данном случае только «main_menu». Так как создаем только главное меню. Также может быть и «left_menu» или «wright_menu» – в зависимости от проекта сайта.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
настройки структуры

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже в строке указываем: левое меню, нижнее или правое. На данный момент создаем главное, и вторую строчку оставляем пустой. «Сохранить». Переходим в раздел «Сайт».

Следующий шаг – «Создать раздел». Важно создать именно раздел, а не страницу. Так будет возможность создавать подпапки для файлов подпунктов меню.

Обратите внимание! Все разделы создаются на главной странице.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне указываем название раздела и соответствующий документ.

Далее «Имя нового» и в строке «Тип меню» оставляем «Главное». Если предусмотрено создание нескольких меню (левое, правое, нижнее и т.д.), в выпадающем списке указываем к которому меню будет относиться создаваемый пункт.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Далее в свойствах раздела прописываем название каталога и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне редактирования пока прописываем текст-образец и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После видим текст на странице. И в корне появится файл about.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже на слайде показано, как выглядят разделы в файле menu.php. Зеленым маркером обозначены документы, которые указываем при создании нового раздела. Удобно скопировать название и затем использовать.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
компонент меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6 Следующим создаем компонент «Услуги». Обязательно переходим на главную страницу, иначе раздел будет создан в папке about, а не в корне. Можно прямо в адресной строке удалить часть пути, ведущего в ново созданный раздел, и нажать enter.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вернуться на главную

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Алгоритм действий, как и при создании предыдущих компонентов. Главное правильно указать название документа, к которому будет обращаться Битрикс.

Шаг 1

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание ного раздела – услуги

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – дейстие 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
свойства раздела – действие 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 4

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 5

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создаем новые разделы на главной

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После сохранения помним об обязательном переходе на главную страницу.

Таким же способом создаем еще два пункта: проекты и контакты. Можете выполнить задачу опираясь на предыдущие слайды или видео, где описано пошагово создание всех компонентов меню.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Bitrix

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В итоге в корне сайта Битрикс создаст каталог для каждого нового пункта меню.

Создание компонента «Меню»

Важно! Компонент создается только на посторонней странице. Так минимизируется риск испортить весь шаблон или затерять стили, созданные на рабочих страницах, в случае ошибок.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
пробная страница

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Совершать все дальнейшие действия можно и здесь. Но и специалисты могут случайно сохранить нежелательные изменения. Для работы используем, ранее созданную, страницу new-page.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В параметрах компонента выставляем только параметры меню для первого уровня. Сохранить.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
параметры компонента “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удаляем «br» и копируем код. Выходим без сохранения. Помним: компонент используем только для получения кода, а работаем с заготовленным шаблоном. Ошибки можно ликвидировать и стартовать с исходного кода неограниченное количество раз.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
где взять код компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Вставляем в документ menu.php вначале. Содержимое этого файла закомментируем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
включить компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем изменения и переходим на главную страницу. Результат получим следующий.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
править компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Меню выводится, пункты работают. Хотя выглядит пока незавершенным. Конечно, меню имеет свои стили, находятся в папке bitrix.

Путь к стилям:

  • сomponents;
  • bitrix;
  • menu;
  • template.php.

Делаем небольшую проверку, чтобы убедиться, тот ли файл нужен для работы. После, число «11» удалим.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
простая проверка Битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Повторим, что к папке bitrix в ходе работы лучше не обращаться. Здесь содержаться все стили, важные настройки, как своего рода диск С на компьютере.

Как поправить меню, если в папку bitrix не рекомендуется заходить? С помощью редактирования компонента. Обязательно переходим в режим правки. Появится возможность править компонент. Но на данный момент нужна не эта функция. Наводим на область редактируемого компонента. На панели, рядом с кнопкой редактирования, находится выпадающий список. Копируем шаблон с Битрикс.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать шаблон bitrix-1c

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Да, можно скачать и залить, записать самостоятельно. Но в Битрикс предусмотрен более простой способ.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
как перенести шаблон в 1с-битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Файл называем main_menu. Остальные настройки показаны на слайде выше.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
код вызова компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В menu.php появился вызов нашего меню. Также появилась дополнительная папка components в каталоге шаблона teh. Документ был создан Битрикс автоматически.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать стили битрикс 1с

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Путь к документации выделен зеленым маркером. Содержимое папок в красной рамке. Таким образом, были скопированы стили Битрикс без риска испортить исходные параметры случайными ошибками.

Переходим в папку template2, начнем использовать готовые решения Битрикс. До 13й строчки включительно – прописано оформление (оставим без изменений). Далее код, который будет преобразовываться в ходе обучения. Для удобства отступим.

Дальнейшие действия противоречат инструкции bitrix, но это не критично. Фрагменты кода будем переносить с отключенного участка ниже.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
готовые решения – как использовать

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Третье действие необходимо для максимальной вложенности. Если есть один, и при этом вложено больше, чем один. Допускается пропустить эту деталь, но лучше записать.

Четвертое – копируем проверку. Пятое – выводим ссылку.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
класс header-nav_intem

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Код на промежуточном этапе имеет такой вид. Если мы выводим с активным пунктом меню, то выводится с классом header-nav_intem (1, серый маркер), в противном случае выводим без каких-либо классов (2, серый маркер).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактировать код

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удалим лишние пункты (зеленая рамка, строки 25-37, действие 1). Вставляем текст ссылки – действие 2.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Так должен выглядеть готовый документ. Закомментированный ранее фрагмент больше не нужен – удаляем. Ниже готовый код для копирования, проверки ошибок.

<?php foreach($arResult as $arItem): ?>
                <?php if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?>
                <?php if($arItem["SELECTED"]): ?>

          <li class="header-nav__item"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php else: ?>
                     <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php endif; ?>
                     <?php endforeach; ?>
                     

Как искать ошибки?

После сохранения изменений, к сожалению, ожидания периодически не оправдываются. От ошибок не застрахован как новичок, так и профи.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ошибки в коде

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Битрикс позволяет выводить расширенную информацию об ошибках. На слайде ниже показано, как включить функцию.

В папке settings.php в корне битрикс находим строку debag. Меняем false на true, и сохраняем. Путь к файлу отмечен зеленым маркером. Действия в папке показаны в черной рамке, отмечены оранжевым маркером.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
поиск ошибок битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Показаны все ошибки. Указано, что проблема в 23 строке. Действительно, вместо «:» был другой знак «;».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
расширенный вывод ошибок в bitrix24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Исправим, сохраним и смотрим результат.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
режим редактирования страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Все работает. Единственный минус – не вывелись стили, над чем мы еще поработаем. Осталось вывести «Главную».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Действуем через админпанель и компонент меню, кнопка «редактировать пункт меню».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вставить пункт

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне выбираем «вставить пункт». Прописываем название нового раздела.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ссылка при создании нового пункта меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «Ссылка» ставим слеш, так как страница главная. При помощи стрелочек можно поставить пункты меню в нужном порядке (отмечено серым маркером).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вывод пункта “Главная” в меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем правки. Отключаем режим редактирования, проверяем результат. В итоге все работает, меню подключилось. Но стили по-прежнему не работают. В чем была загвоздка (ошибка) будем разбираться в следующей статье.

Промежуточные итоги

По результатам шести уроков были выведены два компонента: редактируемая области и меню. При хороших знаниях документации Битрикс можно вызывать любые компоненты вручную. Соответственно документация содержит все параметры компонентов. Но это внушительный объем информации, к тому же малопонятный, особенно для новичков. В определенный случаях есть смысл обратиться за помощью на форум.

Но намного проще создавать страницы и вызвать компоненты, чаще всего так и поступают. Также есть готовые решения. Мы уже научились копировать из компонента, чтобы поставить функционал, сделать свое оформление, разделы. Рассмотрели возможность расширенного просмотра ошибок. На этом хочу закончить статью. Благодарю читателей за внимание, буду раз вопросам и комментариям.

Назад