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

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

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

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

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

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

Задачи которые мы решаем:

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

[spoiler]Я не любитель делать ненужное программирование, поэтому все решение будет собрано на штатных компонентах 1С-Битрикс, с одной единственной строчкой кода.

Настройка (решение):

Создание раздела файл 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 текста, которое описывает этот раздел. Это будет такая динамическая структура, которая будем меняться в зависимости от выбранных подразделов, в нашем разделе.

Пример такой реализации: http://tortik39.ru/shop-confectioner/food-dyes/

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

Настраиваем инфоблок:

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

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

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

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



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



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



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




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

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

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

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

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

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



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

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



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

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



Указываем в пункте «Код раздела» выражение ={$_REQUEST[«SECTION_CODE"]} Тем самым выберем символьный код раздела, для которого будем выводить элементы.
Прописываем шаблоны ссылок, для страницы раздела, и элементов раздела. Не забываем о переменной, в которой передается символьный код раздела. Остается настроить нужные данные в компоненте и можно смотреть что получилось.

Компонент отобразил список, и если перемещаться по подразделам, страничка показывает правильное содержимое.




Настройка страницы детальной карточки

Нам нужно настроить страницу, которая будет отображать детальную карточку товара, файл detail.php

В файле страницы у нас три компонента. Останавливаться на компоненте bitrix:catalog.section.list мы не будем, его настройки полностью аналогичны описанным выше.

Второй компонент bitrix:catalog.element как раз и отвечает за отображение детальной карточки товара, давайте его настроим.



Нам нужно получить символьный код раздела и элемента. Делаем мы это, прописывая две строчки для поля «Код элемента» это будет ={$_REQUEST[«ELEMENT_CODE»]}, а для «Кода раздела» это будет ={$_REQUEST[«SECTION_CODE»]}.

Далее прописываем настройки в разделе «Шаблоны ссылок», в разделе уже нам все знакомо.

Смотрим, что у нас получилось:




Открылась детальная карточка, мы все настроили корректно.

У нас на странице detail.php остался еще один компонент, который мы хотели настроить на вывод популярных товаров в этом разделе, это компонент bitrix:catalog.section.

Давайте подумаем, что такое популярное в разделе. У нас есть фильтр - просмотры, предполагаем, если элементы больше всего смотрят - значит они популярны. Мы можем вывести список элементов отобранных по данному фильтру «самые просматриваемые в разделе».

Настройка компонента bitrix:catalog.section на вывод популярных товаров



Традиционно нам нужно передать в «Код раздела» символьный код раздела, для которого и будем отбирать нужные нам элементы, прописываем ={$_REQUEST[«SECTION_CODE"]}

Традиционный блок с настройкой «Шаблона ссылок»





Указываем в компоненте настройку отбора по фильтру, показ самых просматриваемых элементов.






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




Новая адаптивная постраничная навигация

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

Давайте посмотрим, где это настраивается:





В блоке настроек «Настройка постраничной навигации» необходимо выбрать шаблон с названием «ROUND»


Мы настроили страницы, но ничего не работает

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

Первый шаг - настройка инфоблока



В инфоблоке необходимо прописать, «URL страницы информационного блока» - указываем в поле наш каталог: #SITE_DIR#/shop-for-confectioner/

В поле «URL страницы раздела» прописываем, как будет строиться ЧПУ для раздела: #SITE_DIR#/shop-for-confectioner/#SECTION_CODE#/

В поле «URL страницы детального просмотра» прописываем, как будет строиться ЧПУ для детальной карточки товара: #SITE_DIR#/shop-for-confectioner/#SECTION_CODE#/#ELEMENT_CODE#/

Ошибки в формирование адресов в инфоблоке, очень часто не приводят к потере работоспособности страниц, и обычно все не обращают на них внимание. Это опасно!

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

Второй шаг - это создание двух правил обработки адресов

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

В следующей статье, я покажу как не делать этот шаг, и как продукт все сделает за вас. Но эта возможность появилась с релиза 15.5 - поэтому я опишу этот шаг здесь.

И так идем в раздел «Правила обработки»



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

Правило создания ЧПУ для разделов

В правиле нам потребуется прописать всего три строки.

Поле «Условие» - это и есть регулярное выражение, которое будет выводить наши разделы. Опустим в этой статье как пишется регулярное выражение, это тема скорей целой книги и разработчикам имеет смысл почитать об этом. Можно просто скопировать мое регулярное выражение: #^/shop-for-confectioner/([\w\d\-]+)(\\?(.*))?#



Поле «Файл» - указываем пусть к нашему файлу list.php, который отвечает за отображение наших разделов: /shop-for-confectioner/list.php

Поле «Правило» - нужно указать переменную, в которой передается символьный код раздела, мы в настройках выше использовали SECTION_CODE, соответственно его и прописываем: SECTION_CODE=$1

Правило создания ЧПУ для элементов

Аналогично правило будет содержать три строки, но немного сложнее:

Поле «Условие» расширяется добавлением кусочка отвечающего за элемент: #^/shop-for-confectioner/([\w\d\-]+)/([\w\d\-]+)(\\?(.*))?#




Поле «Файл» содержит путь к файлу, который отвечает за показ карточки товара, это наш файл detail.php: /shop-for-confectioner/detail.php

Поле «Правило» содержит две переменные, в которых передаются символьные кода, раздела и элемента: SECTION_CODE=$1&ELEMENT_CODE=$2

Настройки закончены, и если вы все сделали правильно, у вас все должно заработать!

Но мы не закончили с заданием, нам еще необходимо сделать хлебные крошки.

Настройка хлебных крошек

Компонент хлебных крошек у нас лежит в header.php шаблона нашего сайта. Настройка компонента очень простая:



На скриншот поместились все настройки компонента.

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

Давайте вспомним задачу:

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

Решение:

Соответственно нам нужно в файлах list.php и detail.php поставить соответствующие галочки.


Для файла list.php идем в компонент bitrix:catalog.section и ставим следующую галочку.





При переходе в разделы, в хлебные крошки попадет название соответствующего раздела.

Для файла detail.php идем в компонент bitrix:catalog.element и ставим следующие галочки.





При переходе к элементу в хлебные крошки попадет как название раздела, так и название элемента.

Давайте посмотрим, что у нас получилось:

Для главной страницы раздела index.php




Для страниц подразделов нашего раздела, файл  list.php





Для страницы детальной карточки товара, файл detail.php
 



Можно было бы на этом считать настройку законченной, но мы не выполнили условие, которое сработало у меня «Не показывать хлебные крошки на странице раздела», файл index.php

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

Нужно вызвать на редактирование файл index.php и прописать в нем одну строку: $APPLICATION->SetPageProperty ("NOT_SHOW_NAV_CHAIN", «Y»);

Данная строчка запрещает выводить хлебные крошки.






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

Пишите свои вопросы в комментариях, я с удовольствием на них отвечу.