Функции навигации

Видеоурок

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

В макете-примере есть три типа навигации: одноуровневое меню, многоуровневое меню и хлебные крошки.

Навигация на сайте формируется при помощи следующих функций:

• nc_browse_level() — вывод меню определённого уровня вложенности;
• nc_browse_path() — вывод хлебных крошек;
• nc_browse_path_range() — вывод хлебных крошек (с параметрами);
• nc_browse_sub() — вывод меню из определённого раздела;
• nc_cond_browse_sub() — вывод меню из определённого раздела (с условием);
• nc_browse_cc() — вывод меню инфоблоков раздела;
• nc_browse_catalogue() — вывод меню сайтов.

Разберём на примерах каждую из функций.

Существует три функции для вывода меню:

• nc_browse_level($level, $browse_template).
  Вывод меню определённого уровня вложенности.
• nc_browse_sub($browse_parent_sub, $browse_template, $ignore_check = 0, $where_cond = "", $level = 0)
  Вывод меню из определённого раздела.
• nc_cond_browse_sub($browse_parent_sub, $browse_template, $where_cond = "")
  Вывод меню из определённого раздела с условием. Функция является частным случаем предыдущей.

Подробнее о работе функций читайте в справочнике по API.

Одноуровневое меню

Первый тип меню в макете-примере — одноуровневое:

В коде макете меню выглядит так:

<div id="menu"><div class="left"><div class="right">
    <ul>
        <li class="menu-active">О нас</li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div></div></div>

Для формирования одноуровневого меню можно воспользоваться первой или второй функцией.

Для примера воспользуемся функцией nc_browse_level($level, $browse_template).

В функцию необходимо передать обязательные параметры:

• $level — номер уровня разделов (самому высокому уровню соответствует значение 0);
• $browse_template — шаблон вывода навигации.

Шаблон вывода навигации представляет собой одномерный массив $browse_template вида:

$browse_template['prefix']   = "<ul>";
$browse_template['suffix']   = "</ul>";
$browse_template['active']   = "<li><a href='%URL'>%NAME</a></li>";
$browse_template['unactive'] = "<li><a href='%URL'>%NAME</a></li>";

В шаблонах навигации доступны следующие макропеременные:

• %NAME — название элемента (раздела);
• %URL — путь к разделу;
• %PARENT_SUB — номер родительского раздела (только для разделов);
• %KEYWORD — ключевое слово раздела (только для разделов);
• %SUB — номер раздела;
• %COUNTER — номер выводимого элемента в списке (начиная с нуля);
• %NEXT_LEVEL — отображение следующего уровня меню. Используется при построении многоуровневых меню.
• %имя_поля_в_системной_таблице — произвольная переменная, задаваемая в блоке «Разделы» в системных таблицах.

Некоторые из переменных предназначены только для формирования меню.

Массив формирования навигации может иметь элементы:

Изменим массив $browse_template в соответствии с заданным html-кодом:

$horizontal_menu['prefix']   = "<div id='menu'><div class='left'><div class='right'><ul>";
$horizontal_menu['suffix']   = "</ul></div></div></div>";
$horizontal_menu['active']   = "<li class='menu-active'>%NAME</li>";
$horizontal_menu['unactive'] = "<li><a href='%URL'>%NAME</a></li>";

Поместите этот массив в поле шаблона вывода навигации.

В шаблоне вместо html-кода пропишите функцию:

nc_browse_level(0, $horizontal_menu)

Цифра 0 в функции обозначает уровень вывода меню. В данном случае будут выведены все включённые пункты только корневого раздела.

На рисунке разделы, помеченные серым цветом, выведены не будут.

Сейчас фрагмент кода верхней части сайта выглядит так:

<div id="header">
    <div id="logo">
        <a href="/"><img src="<?=$nc_parent_template_folder_path;?>images/logo.gif"/></a>
        <span class="name">Моя<span>Компания</span></span>
        <span>Слоган компании</span>
    </div>
    <div class="sep"></div>
    <?=nc_browse_level(0, $horizontal_menu); ?>
</div>

Многоуровневое меню

В боковой колонке сайта представлено многоуровневое меню:

В случае, когда в боковой колонке понадобилось бы вывести подпункты горизонтального меню (то есть только один уровень), можно использовать ту же функцию, но с параметром уровня равным 1, 2 и т. д., в зависимости от уровня вложенности:

nc_browse_level(1, $verical_menu)

В данном случае выводятся подразделы определённого раздела и для его вывода воспользуемся функцией:

nc_browse_sub($browse_parent_sub, $browse_template, $ignore_check = 0, $where_cond = "", $level = 0)

Функцию можно использовать как для формирования одноуровневого меню, так и многоуровневого. В функцию необходимо передать обязательные параметры:

• $browse_parent_sub — id родительского раздела, из которого должны формироваться пункты меню. Корневой раздел имеет номер 0.
• $browse_template — шаблон вывода навигации. В функцию необходимо передать переменную с выводом уровня меню и массив шаблона.

Так же можно указать необязательные параметры:

• $ignore_check = 0 — если параметр установлен в 1, будут выведены все выключенные разделы.
• $where_cond = "" — параметр определяет дополнительные условия выборки из таблицы Subdivision.
• $level = 0

Использование необязательных параметров будет описано ниже.

В коде вывод меню пока выглядит так:

<div class="submenu">
    <ul>
        <li class="menu-active">Категории</a>
            <ul>
                <li><a href="#">Первая</a></li>
                <li><a href="#">Вторая</a></li>
            </ul>
        </li>
        <li><a href="#">Аксессуары</a></li>
    </ul>
</div>

Составим массив вывода многоуровневого меню:

$vertical_menu[0]['prefix']   = "<div class='submenu'><ul>";
$vertical_menu[0]['suffix']   = "</ul></div>";
$vertical_menu[0]['active']   = "<li class='active'>%NAME %NEXT_LEVEL</li>";
$vertical_menu[0]['unactive'] = "<li><a href='%URL'>%NAME</a>%NEXT_LEVEL</li>";

$vertical_menu[1]['prefix']   = "<ul>";
$vertical_menu[1]['suffix']   = "</ul>";
$vertical_menu[1]['active']   = "<li><a href='%URL'>%NAME</a></li>";
$vertical_menu[1]['unactive'] = "<li><a href='%URL'>%NAME</a></li>";

Так как меню является многоуровневым, в шаблон навигации добавляется новая макропеременная %NEXT_LEVEL.

В макете вместо HTML-кода пропишите вызов функции:

nc_browse_sub(299, $vertical_menu)

где 299 — номер родительского раздела, из которого выводятся подразделы. В карте сайта это выглядит так:

Рассмотрим на примере, в каких случаях можно использовать параметр $where_cond функции nc_browse_sub() и nc_cond_browse_sub().

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

Без использования параметра условия $where_cond выполнение задачи сильно усложняется. Решение простое — в системных таблицах в блок «Разделы» нужно добавить новые поля.

Полей должно быть столько, сколько типов меню.

В результате, на вкладке дополнительных настроек у каждого разделов появится опция, которую нужно выставить в нужно значение.

В функции вывода теперь нужно дописать параметр $where_cond, содержащий имя поля. Например, 

nc_browse_sub(0, $vertical_menu, 0, $where_cond="show_top_menu='1'")

Аналогичную вставку нужно сделать и для других случаев вывода меню.

Использование функций s_browse_

Если вам не хватает данных макропеременных, или вы хотите использовать PHP условия, вы можете использовать функции с префиксомs_browse_, в них доступен внутренний массив $data[] и выполняется eval() шаблонов, благодаря чему можно передавать в шаблон PHP код(экранированный). Массив $data[] содержит все данные из таблицы Subdivision о текущих подразделах выводимых функцией.
Например:

$browse_sub[0]['unactive'] = "<li><a href=\".\$data[\$i][Hidden_URL].\">\".\$data[\$i][Subdivision_Name].\"</a></li>";

равносильно записи:

$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a></li>";

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

$browse_sub[0]['unactive'] = "<li><a href=%URL>%NAME</a> \".\$db->get_var(\"SELECT COUNT(Message_ID)
  FROM MessageXX WHERE Subdivision_ID=\".\$data[\$i][Subdivision_ID]).\"</li>";

где XX - номер компонента подключенного в разделах.

Обратите внимание на слэши перед знаками $ и ", они обязательны, поскольку обработка этого массива и выполнение вложенных функций должны осуществляться внутри функции s_browse_, а не на этапе инициализации массива $browse_sub.

Важно: в функциях s_browse_ недоступна макропеременная %NEXT_LEVEL.

Важно:  функции s_browse_ не выбирают автоматически уровень шаблона как это делается в %NEXT_LEVEL, поэтому необходимо при вызове функции передавать один конкретный уровень шаблона, например

s_browse_level(0,$browse_sub[0])

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

$left_menu[0]['active']     = "<li>%NAME \".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";

Также шаблон следующего уровня $left_menu1[1] не будет доступен в области видимости функции s_browse_sub, поэтому нужно получить к нему доступ через глобализацию:

$left_menu[0]['prefix'] = "\"; global \$left_menu; \$result.=\"<ul>";

Полный пример на 3 уровня вложенности:

$left_menu[0]['prefix'] = "\"; global \$left_menu; \$result.=\"<ul>";
$left_menu[0]['suffix'] = "</ul>";
$left_menu[0]['active']     = "<li>%NAME \".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";
$left_menu[0]['unactive']   = "<li><a href='%URL' title='%NAME'>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[1]).\"</li>\n";

$left_menu[1]['prefix'] = "\"; global \$left_menu; \$result.=\" <ul>";
$left_menu[1]['suffix'] = "</ul>";
$left_menu[1]['active']     = "<li>%NAME\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[2]).\"</li>\n";
$left_menu[1]['unactive']   = "<li ><a href='%URL' title='%NAME'>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$left_menu[2]).\"</li>\n";

$left_menu[2]['prefix'] = "<ul>";
$left_menu[2]['suffix'] = "</ul>";
$left_menu[2]['active'] =   "<li>%NAME</li>\n";
$left_menu[2]['unactive'] = "<li><a  href='%URL' title='%NAME'>%NAME</a></li>\n";         

echo s_browse_sub(0, $left_menu[0]);

Важно: в случае если шаблон навигации описывается в шаблоне компонента(префикс/системные настройки), то необходимо дополнительно вывести массив шаблон из области видимости компонента в общую:

global $left_menu;

Карта сайта

Список всех разделов (карты сайта) на самом сайте выводится так же весьма просто. Для карты сайта нужно создать новый раздел, к нему подключить макет дизайна следующего содержания:

• в шаблон вывода навигации прописать:

  $browse_map['prefix']   = "<ul>";
  $browse_map['unactive'] = "<li><a href=%URL>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$browse_template).\"</li>";
  $browse_map['active']   = "<li><a href=%URL>%NAME</a>\".s_browse_sub(\$data[\$i][Subdivision_ID],\$browse_template).\"</li>";
  $browse_map['suffix']   = "</ul>";

• в место вывода карты прописать вызов функции:

  s_browse_sub(0,$browse_map)

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

Хлебные крошки

Последний элемент навигации на странице — хлебные крошки. Формируется при помощи функций:

• nc_browse_path($browse_template)
  Вывод по заданному шаблону
• nc_browse_path_range($from, $to, $browse_template, $reverse = 0, $show = 0)
  Вывод с указанными параметрами

В качестве переменных $browse_template так же необходимо указать массив данных. В коде хлебные крошки выводятся в строке:

<div class='breadcrumbs'><a href='#'>Главная</a> / Новости</div>

Нужно составить массив для вывода:

$breadcrumbs['prefix']   = "<div class='breadcrumbs'>";
$breadcrumbs['suffix']   = "</div>";
$breadcrumbs['active']   = "%NAME";
$breadcrumbs['unactive'] = "<a href='%URL'>%NAME</a>";
$breadcrumbs['divider']  = " / ";

и прописать в макете вывод:

nc_browse_path( $breadcrumbs )

Итоговый вид

Элементы навигации адаптированы и сейчас в поле «Шаблоны вывода навигации» находится 4 блока массивов:

$horizontal_menu['prefix']    = "<div id='menu'><div class='left'><div class='right'><ul>";
$horizontal_menu['suffix']    = "</ul></div></div></div>";
$horizontal_menu['active']    = "<li class='menu-active'>%NAME</li>";
$horizontal_menu['unactive']  = "<li><a href='%URL'>%NAME</a></li>";

$vertical_menu[0]['prefix']   = "<div class='submenu'><ul>";
$vertical_menu[0]['suffix']   = "</ul></div>";
$vertical_menu[0]['active']   = "<li class='active'>%NAME%NEXT_LEVEL</li>";
$vertical_menu[0]['unactive'] = "<li><a href='%URL'>%NAME</a>%NEXT_LEVEL</li>";

$vertical_menu[1]['prefix']   = "<ul>";
$vertical_menu[1]['suffix']   = "</ul>";
$vertical_menu[1]['active']   = "<li><a href='%URL'>%NAME</a></li>";
$vertical_menu[1]['unactive'] = "<li><a href='%URL'>%NAME</a></li>";

$breadcrumbs['prefix']        = "<div class='breadcrumbs'>";
$breadcrumbs['suffix']        = "</div>";
$breadcrumbs['active']        = "%NAME";
$breadcrumbs['unactive']      = "<a href='%URL'>%NAME</a>";
$breadcrumbs['divider']       = " / ";

Верхняя часть макета значительно сократилась и теперь она выглядит так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Index</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="<?=$nc_parent_template_folder_path;?>/general.css" />
</head>
<body>
<div id="main"><div class="content">
    <div id="header">
        <div id="logo">
            <a href="/"><img src="<?=$nc_parent_template_folder_path;?>images/logo.gif"/></a>
            <span class="name">Моя<span>Компания</span></span>
            <span>Слоган компании</span>
        </div>
        <div class="sep"></div>
        <?=nc_browse_level(0, $horizontal_menu) ;?>
    </div>
    <div id="left_content">
        <?=nc_browse_sub(299, $vertical_menu); ?>
    </div>
    <div id="content" class="is_left">
        <?=nc_browse_path($breadcrumbs);?>
        <h1>Далеко-далеко за словесными горами.</h1>