О задаче

У комплексного компонента Новости Комплексный компонент позволяет создать новостной раздел на сайте. Доступен просмотр детальной информации, списка элементов, настройка экспорта в rss, организация голосования за новости (или другие элементы инфоблоков), настройка отзывов, вывода материалов по темам, настройки ЧПУ и многое другое.

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

Более сложный и красивый фильтр предоставляет компонент Умный фильтр Компонент подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов.

Описание компонента «Умный фильтр» в пользовательской документации. , который обычно используется в каталоге товаров Интернет-магазина.

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

Теперь перейдем к практическому примеру.

  Видеоурок

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

  Подготовка инфоблока

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

1. Дата публикации - простое свойство типа "Дата/Время", в котором будем указывать дату публикации новости на сайте;
2. Тема - выберем свойство типа "Справочник". Так мы получим возможность выводить красивый фильтр по темам новостей с иконками.

Для обоих свойств откроем форму настроек (кнопка с тремя точками) и настроим параметры умного фильтра . Отметим опции Показывать в умном фильтре и Показать развернутым. Для Даты публикации выберем вид Календарь, а для Темы - Флажки с названиями и картинками.

В свойстве Тема создадим четыре варианта тем и для каждой добавим картинку (секция Дополнительные настройки в форме настроек свойства):

  Настройка компонентов

Создадим новый раздел для новостей на сайте. И разместим на странице два простых компонента: Умный фильтр и Список новостей Одностраничный компонент выводит список новостей из одного информационного блока.

Описание компонента «Список новостей» в пользовательской документации. .

  Умный фильтр

В настройках умного фильтра для примера достаточно указать тип инфоблока и инфоблок:

Дополнительно скопируем значение из поля Имя выходящего массива для фильтрации. Оно нужно нам для настройки компонента Список новостей. По умолчанию в поле указано значение arrFilter.

  Список новостей

Сначала так же выберем тип инфоблока и сам инфоблок Новости. И обязательно заполним поле Фильтр, указав в нём скопированное ранее значение (arrFilter):

Остальные настройки выполните по желанию. Например, у нас выбран шаблон компонента flat.

  Результат

Все необходимые настройки выполнены. Посмотрим на результат:

1 - умный фильтр с возможностью фильтрации по двум свойствам. При выборе параметров появится всплывающее окно со ссылкой Показать по нажатии на которую применится фильтр.

2 - под фильтром отображается список наших новостей. Он будет меняться в зависимости от выбранных в фильтре параметров.