Урок 8. Добавляем компоненты на сайт

На главной странице нужно показать последние новости. Материалы уже есть в инфоблоке — месте, где сайт хранит однотипные данные: статьи, товары, акции. Чтобы вывести эти материалы на страницу, в 1С-Битрикс: Управление сайтом используют компоненты.

Разбираемся, зачем странице компоненты

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

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

Компоненты можно спутать с инфоблоками, потому что они часто работают с одними материалами. Разница в задаче: инфоблок хранит материалы, а компонент показывает их на странице.

Например, товары лежат в инфоблоке каталога. Компонент берет их оттуда и выводит на страницу: списком товаров, карточкой товара или другим способом, который настроен на сайте.

Создаем блок новостей за пять шагов — добавляем компонент

В уроке 4 мы уже упоминали компоненты: через них работают Медиапроигрыватель и Видеотека.

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

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

1. Откройте страницу, куда нужно добавить новости, и включите Режим правки.
   
2. Наведите курсор на рабочую область страницы и откройте ее в визуальном редакторе. Редактор можно открыть и через панель управления: Изменить страницу > В визуальном редакторе.
   
3. В визуальном редакторе справа найдите панель компонентов. Если панель скрыта, раскройте ее стрелкой.
   

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

4. На панели компонентов откройте раздел Контент > Статьи и новости и выберите Список новостей. Чтобы найти компонент быстрее, используйте поле поиска.
   
5. Перетащите компонент в область страницы, где должен появиться блок новостей.
   

Откроется окно с настройками компонента. Если окно не появилось, выделите компонент в редакторе и откройте его параметры.

Заполняем главные параметры, чтобы блок не остался пустым

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

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

В группе Основные параметры заполните поля:

• Тип информационного блока — укажите группу, в которой лежит нужный инфоблок. На демосайте из нашего примера это [news].
• Код информационного блока — выберите сам инфоблок с материалами. На демосайте из нашего примера это [1] Новости.

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

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

Проверяем сортировку, ссылки и шаблон компонента

Основные параметры заполнили. Теперь проверьте еще несколько настроек: они влияют на внешний вид блока, порядок материалов и переходы по ссылкам.

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

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

• Шаблон компонента — отвечает за внешний вид блока. Если дизайнер или разработчик не давали отдельный шаблон, оставьте значение по умолчанию.
• Источник данных — проверьте сортировку. Для Списка новостей выберите дату новости, например Дата начала активности, и направление По убыванию. Тогда в начало списка попадут свежие материалы.
• Шаблоны ссылок — отвечают за переход из списка к полной версии новости. Для такого перехода на сайте должна быть страница с компонентом детального просмотра. В поле указывают ее адрес и параметр новости, например detail.php?ID=#ELEMENT_ID#. Не копируйте пример без проверки: имя страницы и параметра на вашем сайте могут отличаться.

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

Сохраните настройки компонента и страницу.

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

Проверяем результат

Настройки сохранены. Теперь посмотрите на страницу так, как ее увидит посетитель.

Проверьте:

1. Новости появились в нужном месте страницы.
2. Ссылки на новости открываются.
3. Блок аккуратно выглядит на телефоне и в окне браузера.

Если блок не появился, начните с простого. Проверьте, что:

• страница сохранена,
• выбран правильный инфоблок,
• в инфоблоке есть активные новости.

Если новости есть в административном разделе, но на странице их нет, причина может быть в датах показа, правах доступа или кеше. В таком случае обратитесь к администратору или разработчику.

Как изменить настройки позже

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

В Режиме правки наведите курсор на блок новостей и нажмите шестеренку.

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

Немного о простых и комплексных компонентах

В панели компонентов вы можете встретить простые и комплексные компоненты.

Простой компонент решает одну задачу на одной странице. Например, Список новостей, который мы добавили в этом уроке, выводит один блок с материалами.

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

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