152  /  392

Список новостей: кастомизация шаблона компонента

Просмотров: 250 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

В предыдущем уроке Создание шаблона – первый шаг в интеграции дизайна.

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

Подробнее...
мы создали шаблон главной страницы сайта. Однако пока вся информация на сайте - статическая, и для внесения любых изменений придется править главную страницу index.php. Это не очень удобно, если информация на сайте должна постоянно обновляться. И при этом слишком громоздко.

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

Подробнее...
а потом с помощью компонентов Компонент - это логически завершённый код, предназначенный для извлечения информации из инфоблоков и других источников и преобразования её в HTML-код для отображения в виде фрагментов web-страниц. Состоит из собственно компонента (контроллер) и шаблона (представление). Компонент, с помощью API одного или нескольких модулей, манипулирует данными. Шаблон компонента выводит данные на страницу.

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

1. Приведение формы вывода данных компонента в соответствие с дизайном сайта;

2. Организация вывода данных компонента в виде, недоступном в стандартном варианте.

Подробнее...
шаблон компонента.

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

  • Список новостей (news.list) Одностраничный компонент выводит список новостей из одного информационного блока (в качестве результата возвращает ID показанных элементов). Настройки позволяют кастомизировать вывод полей элементов в списке, управлять постраничной навигацией, выбирать формат даты, управлять настройками кеширования и т.д. Компонент стандартный и входит в дистрибутив модуля.

    В визуальном редакторе компонент расположен по пути: Контент > Статьи и новости > Список новостей.

    Компонент относится к модулю Информационные блоки.

    Описание компонента «Список новостей» в пользовательской документации.
    - его разместим на главной странице сайта для вывода анонсов новостей;
  • Новость детально (news.detail) Одностраничный компонент, осуществляющий вывод детального описание новости. Компонент стандартный и входит в дистрибутив модуля.

    В визуальном редакторе компонент расположен по пути: Контент > Статьи и новости > Новость детально.

    Компонент относится к модулю Информационные блоки.

    Описание компонента «Новость детально» в пользовательской документации.
    - для вывода детальной новости нужно будет создать новую страницу со своим шаблоном.

В этом уроке изменим дизайн компонента Список новостей. Рассмотрим пошагово:

1. Копирование шаблона компонента

Скопируйте шаблон компонента Список новостей. Это можно сделать двумя способами:

  • В рамках файловой системы копированием папки Контент > Структура сайта > Файлы и папки > bitrix > templates > [ваш шаблон] > components > bitrix > [название компонента] > [название шаблона компонента].
  • Средствами интерфейса системы, разместив на странице компонент и скопировав его с помощью команды Копировать шаблон компонента (при включённом режиме Правка). Копировать лучше в текущий шаблон сайта.

В данном примере скопирован шаблон default.

2. Кастомизация шаблона компонента

  • В исходном файле вёрстки index.html скопируйте блок, выводящий новости (в нашем случае блок Call to Action Section).
  • В папке скопированного шаблона компонента news.list откройте в режиме редактирования файл template.php.
  • После первой строки <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?> (защита от подключения файла напрямую без подключения ядра) вставьте скопированный ранее код вёрстки.
  • Теперь нужно разобраться в общей структуре кода вёрстки (какая часть кода за что отвечает):

    1 - стиль заголовка блока и сам заголовок;

    2 - стиль блока;

    3 - три элемента блока (т.е. три новости) со своими стилями.

    Код 1 и 2 оставим без изменений, а работать будем с 3:

  • Примечание: Весь нижеприведённый код есть в штатном шаблоне компонента, который мы копировали в пункте 1.

    • Код трёх новостей заменим на конструкцию foreach, которая будет перебирать массив элементов и выводить найденные новости:

      <? foreach ($arResult["ITEMS"] as $arItem): ?>
      	<?
      	$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
      	$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
      	?>
      
      	<!--  Код одной новости из исходного файла index.html  -->
      		<div class="col-lg-4 text-center">
      			<div class="card bg-secondary border border-dark">
      				<img class="card-img-top" src="img/2.jpg" alt="News image cap">
      				<div class="card-body">
      					<h5 class="card-title">News title</h5>
      					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      					<a href="#" class="btn btn-primary">Go somewhere</a>
      				</div>
      			</div>
      		</div>
      
      <? endforeach; ?>
      

    • Пропишем вызов пути картинки анонса src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>". Вместо статического названия элемента укажем <? echo $arItem["NAME"] ?> (будут подтягиваться названия элементов инфоблока):

      <img class="card-img-top" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>"
      	alt="<? echo $arItem["NAME"] ?>">
      <div class="card-body ">
              <h5 class="card-title"><? echo $arItem["NAME"] ?></h5>
      

    • Выводить текст анонса новостей будем конструкцией:

      <? if ($arParams["DISPLAY_PREVIEW_TEXT"] != "N" && $arItem["PREVIEW_TEXT"]): ?>
      	<p class="card-text"><? echo $arItem["PREVIEW_TEXT"]; ?></p>
      <? endif; ?>
      

    • В коде, отвечающем за вывод кнопки перехода на страницу детального просмотра элемента, пропишем <? echo $arItem["DETAIL_PAGE_URL"] ?>:

      <a href="<? echo $arItem["DETAIL_PAGE_URL"] ?>" class="btn btn-primary">Подробнее</a>
      

    Итоговый код кастомизированного шаблона компонента news.list



    0
    Курсы разработаны в компании «1С-Битрикс»

    Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
    Развернуть комментарии