Умный фильтр для новостей

Урок 310 из 349
Автор: Марина Павлова
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
3 из 5
Дата изменения: 22.04.2021
Просмотров: 1121

Пусть у нас есть простой инфоблок с новостями (без древовидной структуры). И мы хотим иметь возможность фильтровать новости на сайте.

  О задаче

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

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

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

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

Важно: Умный фильтр работает только со свойствами инфоблока.

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

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

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

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

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

Нажмите на рисунок, чтобы увеличить

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

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

В свойстве Тема создадим четыре варианта тем и для каждой добавим картинку:

Нажмите на рисунок, чтобы увеличить

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

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

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

Примечание: Компонент Умный фильтр должен подключаться перед компонентом вывода элементов инфоблока, иначе список элементов фильтроваться не будет.

  Умный фильтр

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

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

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

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

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

  Результат

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

Нажмите на рисунок, чтобы увеличить

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

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

Примечание: В уроке мы использовали простой компонент Список новостей. Для полноценной работы новостного раздела не забудьте настроить детальный просмотр новостей и URL-ы страниц.



Курсы разработаны в компании «1С-Битрикс»
Спасибо, мы рады что смогли помочь Вам. Ниже Вы можете оставить свой отзыв или пожелание :)
Нам жаль это слышать… Но мы постараемся быть лучше! Поясните, пожалуйста, свой выбор:

Мы благодарны Вам за помощь в улучшении документации.

Мы стараемся сделать документацию понятнее и доступнее,
и Ваше мнение важно для нас