Как настроить хлебные крошки в 1C-Битрикс

Хлебные крошки — это элемент навигации, который показывает пользователю путь от главной страницы до текущей. В 1C-Битрикс для их вывода используется компонент bitrix:breadcrumb. Эта статья поможет вам подключить и настроить хлебные крошки, а также устранить возможные проблемы.

Шаг 1: Добавление компонента на страницу

Для вывода хлебных крошек добавьте компонент в шаблон сайта, например, в файл header.php вашего шаблона. Пример кода:

<?php
$APPLICATION->IncludeComponent(
"bitrix:breadcrumb",
"custom",
Array(
"PATH" => "",
"SITE_ID" => "s1",
"START_FROM" => "0"
)
);
?>

Параметры компонента:

• PATH: Путь для формирования крошек. Обычно оставляют пустым, чтобы использовать текущий путь.
• SITE_ID: Идентификатор сайта (например, s1). Проверьте его в настройках (Настройки → Сайты).
• START_FROM: Уровень, с которого начинается цепочка (0 — с главной страницы).

Добавьте этот код в нужное место шаблона, например, в /bitrix/templates/ИМЯ_ШАБЛОНА/header.php.

Шаг 2: Создание шаблона компонента

Компонент использует шаблон для отображения крошек. Стандартный шаблон находится в /bitrix/components/bitrix/breadcrumb/templates/.default/. Чтобы настроить отображение, создайте собственный шаблон в папке:

/bitrix/templates/ИМЯ_ШАБЛОНА/components/bitrix/breadcrumb/custom/

Создайте файл template.php со следующим кодом:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

if (empty($arResult)) {
return "";
}

$output = '<nav class="nav-chain" itemscope itemtype="http://schema.org/BreadcrumbList">';

foreach ($arResult as $key => $entry) {
$name = htmlspecialchars($entry["TITLE"]);
$position = $key + 1;

if ($entry["LINK"] && $key < count($arResult) - 1) {
$output .= '
<span class="nav-chain__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="' . $entry["LINK"] . '" title="' . $name . '" itemprop="item">
<span itemprop="name">' . $name . '</span>
</a>
<meta itemprop="position" content="' . $position . '" />
</span>';
} else {
$output .= '
<span class="nav-chain__item nav-chain__item--current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">' . $name . '</span>
<meta itemprop="position" content="' . $position . '" />
</span>';
}
}

$output .= '</nav>';

return $output;

Этот код:

• Проверяет, что массив $arResult не пустой.
• Формирует навигационную цепочку с микроразметкой schema.org.
• Выводит ссылки для всех элементов, кроме последнего, который отображается как текст.

Шаг 3: Стилизация навигационной цепочки

Добавьте CSS-стили в ваш файл стилей (например, /bitrix/templates/ИМЯ_ШАБЛОНА/style.css):

.nav-chain {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
padding: 10px 0;
}

.nav-chain__item:not(:last-child)::after {
content: "»";
margin-left: 8px;
color: #666;
}

.nav-chain__item a {
color: #0055cc;
text-decoration: none;
}

.nav-chain__item a:hover {
text-decoration: underline;
}

.nav-chain__item--current {
color: #333;
font-weight: bold;
}

Этот CSS создает горизонтальную цепочку с разделителем «» и выделяет текущую страницу жирным шрифтом.

Шаг 4: Настройка структуры сайта

Хлебные крошки зависят от структуры сайта (разделов, страниц или инфоблоков). Для корректного отображения:

1. Страницы инфоблоков: Убедитесь, что у элементов и разделов инфоблока заполнены поля NAME и URL. Проверьте настройки инфоблока в админке (Контент → Инфоблоки).
2. Статические страницы: Для страниц, не связанных с инфоблоками, задайте заголовок и добавьте в цепочку вручную:<?php
   $APPLICATION->SetTitle("Название страницы");
   $APPLICATION->AddChainItem("Название страницы", "/url/");
   ?>
   
3. Проверка SITE_ID: Убедитесь, что SITE_ID соответствует вашему сайту.

Шаг 5: Решение проблем

Если крошки не отображаются или отображаются некорректно:

• Проверьте $arResult: Выведите массив для отладки в template.php:echo '<pre>'; print_r($arResult); echo '</pre>';
  
• Отключите кэш: Добавьте в вызов компонента:"CACHE_TYPE" => "N"
  
• Проверьте URL: Убедитесь, что URL страницы корректно обрабатывается в /bitrix/urlrewrite.php.
• Шаблон: Если крошки не видны, проверьте наличие шаблона custom или используйте стандартный шаблон из /bitrix/components/bitrix/breadcrumb/templates/.default/.

Пример результата

На странице, например, /contacts/, крошки могут выглядеть так:

Главная » Контакты

Для страницы инфоблока, например, /products/laptops/:

Главная » Продукты » Ноутбуки

Заключение

Настройка хлебных крошек в 1C-Битрикс — это несложный процесс, если правильно настроены шаблон, компонент и структура сайта. Используйте предложенный код, настройте стили и проверьте данные страниц. Если возникают проблемы, отладка $arResult и отключение кэша помогут их решить.