Мастер-класс настройки ЧПУ в «1С-Битрикс: Управление сайтом» - Часть 1

За последнюю неделю заметил на форуме несколько тем, в которых шло бурное обсуждение ЧПУ (человека-понятные ссылки на товары, страницы и т.п.) на отдельных компонентах каталога. Тема всегда оставалась сложной и каждый пытался в ней разобраться, как мог. Отвечать по этой теме сложно, а если подробно, то и неудобно в формате форума, поэтому родилась идея выпустить эту статью.

В 1С-Битрикс есть комплексный компонент управления каталогом bitrix.catalog в котором все достаточно просто, ставится он по умолчанию предварительно настроенный.

При всех его достоинствах в нем есть один недостаток, он поставляется как есть и может подойти не для всех.

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

В начале я бы хотел разобрать более старую схему настройки, которая работала до последнего релиза 15.5 (первая часть статьи). А потом показать, что сделано в продукте в последнем 15.5 релизе, чтобы облегчить достаточно сложную настройку ЧПУ (вторая часть статьи).

• Требуется показать раздел, в котором будет своя уникальная страница раздела, файл ( index.php ).
• На всех страницах будет возможность переходить в подразделы данного раздела, файл ( list.php )
• При открытие каждого подраздела заголовок на странице подраздела должен изменится в соответствие с переходом в нужный подраздел
• Должна открываться карточка товара в рамках этого раздела или подраздела, файл ( detail.php ).
• Требуются хлебные крошки (навигационная цепочка в верхней части страницы), причем на основной странице раздела они не будут отображаться, а на всех подразделах и элементах будут.

Создание раздела файл index.php

• Создаем в корневом разделе сайта папку, например (что бы проще понимать для какого раздела эта папка, я взял для названия символьный код раздела): shop-for-confectioner
• Нам понадобится создать в этой папке три файла: index.php, list.php, detail.php
• Размещаем в этих файлах компоненты:
• В файл index.php добавляем компоненты: bitrix:catalog.section.list и bitrix:catalog.section
• В файле list.php добавляем компоненты: bitrix:catalog.section.list (не обязательный, если не нужна навигация на нижних уровнях), bitrix:news.detail (этим компонентом выведем заголовок раздела), bitrix:catalog.section и завершим все еще раз bitrix:news.detail (покажем SEO текст для раздела) - можно было бы упростить, но хочется показать некоторые моменты упрощающие жизнь под требования SEO специалистов и большую гибкость взаимодействия между компонентами.
• В файле detail.php добавляем компоненты: bitrix:catalog.section.list и bitrix:catalog.element . Можно сразу добавить схему, вида популярное в этом разделе, добавляем еще bitrix:catalog.section

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

Настройка главной страницы раздела

Давайте разберем настройку первого компонента, bitrix:catalog.section.list , с помощью него мы выведем навигацию по подразделам, нашего основного раздела.

Единственный кусочек в настройке, на который нужно обратить внимание, это указание URL задуманного нами ЧПУ . Он приведет нас к содержимому раздела.

Мы помним, что папка для раздела каталога называется у нас: shop-for-confectioner

А путь ЧПУ я хочу, что бы был вида: /shop-for-confectioner/название-подраздела/название-элемента/

Отлично, смотрим результат настройки:

Отобразились подразделы, в разделе над которым мы работаем.

Разберем настройку следующего компонента bitrix:catalog.section . Он выведет нам отобранный список элементов из всех подразделов нашего раздела. Например, выведем список элементов самых просматриваемых в данном разделе.

• URL ведущий на страницу с содержимым радела, прописывать путь к нашей папке.
• Нужно указать URL , который мы хотим видеть при выводе содержимого из раздела. Где SECTION_CODE - построит нам путь из подраздела, которые есть в нашем разделе. Например, у нас структура каталога /магазин кондитера/краски/элементы краски/ во всех разделах прописаны символьные коды, на основание которых и будет построен полный путь. Следующий элемент настройки ELEMENT_CODE выведем в ЧПУ символьный код элемента. Давайте посмотрим, где прописываются символьные коды у разделов и элементов (я покажу для раздела, для элемента схожий).

Естественно я не прописываю символьные коды вручную, пусть этим занимаемся платформа 1С-Битрикс. Для этого, при создание инфоблока, я включил соответствующую настройку:

Не буду подробно останавливаться на галочках данной настройки, тут интересна только одна « Использовать внешний сервис перевода », в ней я настраиваю перевод через Яндекс, указав ключ в настройках « Главного модуля ».

• Ну и последний элемент настройки, нужно указать, где передается код группы. Указываю тот же - SECTION_CODE

Отобразился список товаров из раздела.

Автоматически формируемый вывод подразделов

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

Вот пример уникального раздела, даже со своим дизайном: http://tortik39.ru/shop-for-confectioner/

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

Настройка страницы отображения подразделов в разделе

Файл - list.php - первым компонентом в нем идет bitrix:catalog.section.list . Разбирать мы его не будем, так как он полностью повторяет настройки как и в файле index.php

А вот следующий компонент необычный - bitrix:news.detail . Этим компонентом, мы выведем из отдельного инфоблока заголовок выбранного подраздела, а его напарником ниже, содержимое SEO текста , которое описывает этот раздел. Это будет такая динамическая структура, которая будем меняться в зависимости от выбранных подразделов, в нашем разделе.

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

Создаем инфоблок « Разделы каталога » - в нем нет свойств и каких либо специфичных настроек. Обычный инфоблок, с выключенной галочкой « торгового каталога ».

Инфоблок создан. Теперь в нем нужно создать столько записей, сколько у нас будет разделов, для которых мы выведем название и SEO текст внизу страницы подраздела или раздела.

Это все просто и работа скорей для копирайтера, а в нашу задачу войдет прописать правильные символьные коды, которые мы должны взять у подразделов нашего инфоблока каталога.

Идем в наш торговый каталог, в котором уже есть наши разделы с товарами и смотрим их символьные коды:

И на основание этих символьных кодов создаем записи в нашем новом инфоблоке с названиями и SEO текстом внутри, и с такими же символьными кодами. Ниже показаны созданные статьи и заголовки, которые нам пригодятся.

Давайте посмотрим одну такую запись внутри:

Название у нас будет заголовком раздела, для первого компонента: bitrix:news.detail . А текст мы разместим во вкладке « Подробно »:

Более « правильную » связь можно сделать, связав инфоблоки через свойство. И тогда не нужно будет контролировать одинаковость символьных кодов, но зато потребуется при создание элемента раздела каталога, выбирать что мы связываем с ним, в виде нашего элемента статьи. Оба вариант имеют свои плюсы и минусы, мне понравилось в данном случае более простое решение.

Самое сложное мы сделали, создали элементы в связном каталоге, проконтролировали, что каждый элемент имеет такой же символьный код, как и у раздела.

Приступаем к настройке bitrix:news.detail

Вся настройка сводится к тому, что бы выбрать наш инфоблок, где хранятся статьи, указать в поле « Код новости » следующий код: =

Этим кодом мы будем выбирать новость с таким же символьным кодом, который будет взят с символьного кода раздела.

Ну и напоследок, отключить все лишнее к выводу, фактически нам нужно вывести только заголовок.

Для второго компонента bitrix:news.detail , который выводится внизу страницы, мы делаем полностью аналогичную настройку. Только выводим вместо заголовка саму новость, наш SEO текст .

Давайте посмотрим, что у нас получилось и как это работает. Я записал небольшой видеоролик для показа динамики.

Получилось то, что нам требовалось.

Теперь нам нужно вывести список товаров из подраздела, нашего раздела, настроить компонент bitrix:catalog.section

Указываем в пункте « Код раздела » выражение =