Введение

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

Описание компонента «Каталог (комплексный компонент)» в пользовательской документации. . Настроить индивидуальное отображение каталога можно вручную на простых компонентах. Рассмотрим процедуру создания такого каталога на небольшом примере. Организуем каталог на сайте в виде трех страниц:

• Главная страница каталога (index.php) - отобразим структуру разделов и TOP элементов каталога;
• Страница содержимого конкретного раздела с умным фильтром (section.php);
• Страница с детальной карточкой товара (element.php).

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

  Создание каталога на простых компонентах

Первый этап - создаем структуру

Создадим новый раздел и три страницы через Публичный раздел:

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

   

   . Введем название. Снимем галочку с редактирования страницы, а добавление пункта в меню оставим. При создании нового раздела, так же создастся страница index.php.
2. В новом разделе создадим две страницы: section.php и element.php. Для них пункты в меню не добавляем, страницы пока оставляем пустыми.

Второй этап - настройка инфоблока товаров

Создайте 1. Откройте страницу Контент > Инфоблоки > Типы инфоблоков > название_типа, где вместо название_типа у вас отображается реальное название нужного типа инфоблоков (учтите, что после создания инфоблока его тип уже нельзя будет поменять).
2. Нажмите кнопку Добавить инфоблок.
3. Заполните поля формы редактирования инфоблока.

Подробнее... и настройте инфоблок товаров:

1. Заполните все обязательные поля и задайте адреса страниц (с учетом созданных нами страниц на первом этапе);
2. Настройте поля и свойства инфоблока;
3. Обязательно настройте инфоблок на работу в режиме торгового каталога; Чтобы нужный информационный блок работал в режиме торговых каталогов, необходимо
   отметить его флажком в поле Является торговым каталогом на странице настроек модуля
   Торговый каталог (Настройки > Настройки продукта > Настройки модулей > Торговый каталог).

   

   Подробнее...
4. Чтобы посетители имели доступ к инфоблоку на закладке Доступ установите Чтение (по умолчанию стоит Запрещен);
5. Выполните настройку отображения свойств в умном фильтре В умном фильтре могут быть отображены свойства товаров и торговых предложений. Кроме того, начиная с версии 15.0.1 модуля Информационные блоки, для свойств доступна настройка их визуального представления.
   Подробнее...
   
   Также для разделов может быть настроен различный набор свойств, в одном инфоблоке возможно держать разнотипные товары с различными свойствами.
   Подробнее... .

Третий этап - размещение и настройка компонентов

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

На странице index.php разместите:

1. Компонент Структура разделов Описание компонента «Структура разделов» в пользовательской документации. и в его настройках укажите:
   • инфоблок товаров в секции Основные параметры;
   • шаблон ссылки на странице раздела в секции Шаблоны ссылок:

     

2. Компонент Top элементов каталога Описание компонента «top элементов каталога» в пользовательской документации. и в его настройках укажите:
   • инфоблок товаров в секции Основные параметры;
   • шаблоны ссылок на страницы раздела и карточки товара в одноименной секции
   • выберите тип цены в секции Цены;
   Примечание: если у вас товары с торговыми предложениями, то в настройках компонента обязательно выберите свойства предложений в секции Внешний вид. Иначе для товаров отобразится пометка Нет в наличии.

На странице section.php разместите:

1. Компонент Умный фильтр Компонент подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов.
   
   Описание компонента «Умный фильтр» в пользовательской документации. , в настройках укажите:
   • инфоблок товаров (секция Источник данных);
   • тип цены (секция Цены);
   Важно! Подключение компонента Умный фильтр обязательно выполняйте до подключения компонента Элементы раздела.
2. Компонент Элементы раздела Компонент выводит список элементов раздела с указанным набором свойств.
   
   Описание компонента «Элементы раздела» в пользовательской документации. , в его настройках укажите:
   • инфоблок товаров в секции Основные параметры;
   • шаблоны ссылок в одноименной секции ;
   • укажите тип цены в секции Цены;

На странице element.php разместите компонент Элемент каталога детально Описание компонента «Элемент каталога детально» в пользовательской документации. и в его настройках укажите:

• инфоблок товаров в секции Основные параметры;
• шаблоны ссылок в одноименной секции ;
• укажите тип цены в секции Цены;

  Настройка ЧПУ для каталога на простых компонентах

Сделаем для нашего каталога на простых компонентах красивые адреса. Для этого нам понадобится:

• Настроить символьные коды Символьный код - это заданный латиницей осмысленный код. ;
• Внести изменения в шаблоны адресов инфоблока и компонентов;
• Включить ЧПУ Средства «1С-Битрикс: Управление сайтом» позволяют сделать ссылки более понятными с помощью специальной функции. Функция встроена во все комплексные компоненты (и отдельные простые) и преобразует стандартный веб-адрес в так называемый человеко-понятный URL (сокращенно ЧПУ).
  Подробнее... в компонентах и настроить Согласитесь, что ссылка на некий элемент инфоблока http://mysite.ru/catalog/pants/pants-striped-flight/ гораздо понятнее посетителям, чем http://mysite.ru/catalog/?SECTION_ID=8&ELEMENT_ID=4. Весомым аргументом в пользу человеко-понятных адресов является и то, что такие адреса лучше воспринимаются поисковыми машинами. Сделайте красивые адреса для элементов инфоблока вместе с поддержкой ЧПУ в компонентах.
  Подробнее... правила его применения.

Настройка символьных кодов

Для того, чтобы в адресах использовались понятные пользователю слова вместо числовых идентификаторов ID, настроим символьные коды CODE:

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

Перейдем к настройкам шаблонов адресов и ЧПУ:

1. В настройках инфоблока изменим адреса таким образом:

   

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

2. Компонент Элемент каталога детально:
   • Настроим новые шаблоны адресов ;
   • Включим ЧПУ и укажем правило : /golovnye-ubory/#SECTION_CODE#/#ELEMENT_CODE#/.
3. Компонент Умный фильтр:
   • Включим ЧПУ и укажем правило : /golovnye-ubory/#SECTION_CODE#/filter/#SMART_FILTER_PATH#/apply/.
4. Компонент Элементы раздела:
   • Настроим новые шаблоны адресов ;
   • Включим ЧПУ и укажем правило : /golovnye-ubory/#SECTION_CODE#/.
5. Для компонента Структура разделов изменим только шаблон адреса на: /golovnye-ubory/#SECTION_CODE#/;
6. Для компонента Top элементов каталога меняем шаблоны . Включаем ЧПУ, но в нашем случае страница всегда неизменна, поэтому правило: /golovnye-ubory/.

  Заключение

Каталог товаров на простых компонентах настроен. Рассмотрены два способа: с применением ЧПУ и без.

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

• Главная (index.php):

  

• Страница элементов раздела (section.php):

  

• Страница детального просмотра (element.php):

  

  Дополнительно

• Создание и настройка инфоблока;
• Разделы и элементы инфоблока;
• Настройки инфоблока для корректного поиска элементов;
• Наполнение каталога товарами;
• Компоненты: выставляем информацию напоказ;
• Как формируются ссылки
• Человеко-понятные URL;
• ЧПУ: делаем адреса понятными - настройка ЧПУ в компонентах;
• Настройка ЧПУ в Умном фильтре;
• Настройка ЧПУ в простых компонентах - примеры создания правил в курсе Администратор. Базовый;