Наступило время интегрировать в наш шаблон сайта 1С-Битрикс последний элемент, который в Уроке 0 мы отнесли к каркасу (Footer+Header) - Набор симпатичных тизерных блоков (т.е. небольших блоков с текстовым сообщением, картинкой и кнопкой).
В этом уроке мы реализуем тизерные блоки с помощью компонента списка новостей на основе инфоблока с несколькими разделами, отобрав данные для вывода с помощью компонента фильтра.
Обратим внимание, что практически идентичный блок (но без логотипов и с кнопками другого цвета) есть в одном из дополнительных макетов - index-3.html:
В рамках этого урока мы сможем реализовать один общий компонент для этих блоков. Данные мы так же станем хранить в общем инфоблоке.
Сразу обратим внимание на особенности вёрстки - при малой ширине экрана тизеры группируются не по 4 в ряд, а по 2:
При ещё большем уменьшении экрана (фактически до уровня мобильного телефона) блоки вновь перегруппируются - по 1 в ряд (т.е. строго друг над другом):
Поскольку всё это уже реализовано в вёрстке нам не потребуется дополнительной работы для реализации такого эффекта. Однако нужно будет внимательно протестировать функционал после внедрения.
Для начала создадим в типе инфоблоков "Шаблон" новый Инфоблок "Тизеры" с символьным кодом TEASERS (процесс создания инфоблока уже описывался в уроке 3, поэтому мы спрячем его под спойлер, который откроют желающие:
На этапе создания инфоблока подумаем какие поля нам могут понадобиться (судя по 2 макетам в начале урока). Перечислим всё:
- Картинка для логотипа
- 1я строка заголовка (подзаголовок)
- 2я строка заголовка (заголовок)
- текст тизера
- ссылка для кнопки
- переключатель цвета тизера
Не будем мудрствовать и сразу определим некоторые дефолтные поля в соответствие тем, что нам нужны:
- Картинка для логотипа - Картинка Анонса
- 1я строка заголовка (подзаголовок)
- 2я строка заголовка (заголовок) - Название Элемента (всё равно это поле обязательно к заполнению)
- текст тизера - Текст Анонса
- ссылка для кнопки
- переключатель цвета тизера
Для оставшихся полей, очевидно придётся создать свойства.
Зайдём во вкладку "Свойства" настроек инфоблока и создадим 2 свойства типа "строка" задав им символьные коды:
- SUBTITLE (для подзаголовка)
- TEASER_LINK (для ссылки)
Для задания цвета тизера создадим переключатель, для этого создадим свойства типа "список" с символьным кодом TEASER_COLOR:
Кнопка с многоточие позволяет перейти в расширенный режим редактирования свойства:
Создадим 2 значения для свойства списка, одно из которых будет значением "по умолчанию":
Для каждого свойства можно задать помимо значения так же XML_ID (если оставить пустым, то система автоматически сгенерирует их). Для значения "Красный" мы воспользуемся классом блока, задающим этот цвет кнопке тизера. Для чёрного мы задали выдуманное значение, которого нет в CSS.
Перейдём в инфоблок и создадим раздел (Контент → тип инфоблока "Шаблон" → инфоблок "Тизеры" → кнопка "добавить раздел"):
Не забудем заполнить как название, так и символьный код (так же обязательное поле согласно сделанным выше настройкам):
Создадим элементы инфоблока (сами тизеры) в данном разделе.
Теперь на тестовой странице (например, 1.php) добавим компонент bitrix:news.list и скопируем шаблон компонента .default в шаблон сайта, переименовав в teasers.
Вынесем текст кнопки в параметры компонента, а для всех необязательных полей поставим проверку на пустоту (не будем выводить картинку, подзаголовок, текст и ссылку, если соответствующие поля у элемента не заполнены). Так же уберём весь мусор, вроде навигационных цепочек.
Тогда код шаблона получится:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="row">
<div class="span12">
<ul class="thumbnails">
<?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')));
?>
<li class="span3" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
<div class="thumbnail <?=$arItem['PROPERTIES']['TEASER_COLOR']['VALUE_XML_ID']?>">
<div class="caption">
<?if (!empty($arItem["PREVIEW_PICTURE"]["SRC"])):?><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" ><?endif?>
<?if (!empty($arItem['PROPERTIES']['SUBTITLE']['VALUE'])):?><h5><?=$arItem['PROPERTIES']['SUBTITLE']['VALUE']?></h5><?endif?>
<h3><?echo $arItem["NAME"]?></h3>
</div>
<div class="thumbnail-pad">
<?if (!empty($arItem["PREVIEW_TEXT"])):?><p><?echo $arItem["PREVIEW_TEXT"];?></p><?endif?>
<?if (!empty($arItem['PROPERTIES']['TEASER_LINK']['VALUE'])):?><a href="<?=$arItem['PROPERTIES']['TEASER_LINK']['VALUE']?>" class="btn btn_"><?=$arParams['BUTTON_TEXT']?></a><?endif?>
</div>
</div>
</li>
<?endforeach;?>
</ul>
</div>
</div>Не забудем в параметрах компонента указать количество выводимых элементов, кратное 4 (в оригинальном макете используется 4 тизера в ряд, однако 8 или 12 так же будут смотреться весьма неплохо).
Сейчас компонент выводится ВСЕ элементы инфоблока, однако мы решили, что будем осуществлять фильтрацию и выводить элементы только определённых разделов (для этого мы и создали выше раздел с символьным кодом MAIN_PAGE). Для того, чтобы это сделать зададим в параметрах компонента переменную для фильтрации - arrFilter.
В таком случае код вызова компонента будет выглядеть:
<?$APPLICATION->IncludeComponent("bitrix:news.list", "teasers", array(
"IBLOCK_TYPE" => "-",
"IBLOCK_ID" => "TEASERS",
"NEWS_COUNT" => "4",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"FILTER_NAME" => "arrFilter",
"FIELD_CODE" => array(
0 => "",
1 => "",
),
"PROPERTY_CODE" => array(
0 => "",
1 => "SUBTITLE",
2 => "TEASER_LINK",
3 => "TEASER_COLOR",
4 => "",
),
"CHECK_DATES" => "Y",
"DETAIL_URL" => "",
"AJAX_MODE" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "N",
"AJAX_OPTION_HISTORY" => "N",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "36000000",
"CACHE_FILTER" => "N",
"CACHE_GROUPS" => "Y",
"PREVIEW_TRUNCATE_LEN" => "",
"ACTIVE_DATE_FORMAT" => "d.m.Y",
"SET_TITLE" => "N",
"SET_STATUS_404" => "N",
"INCLUDE_IBLOCK_INTO_CHAIN" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"HIDE_LINK_WHEN_NO_DETAIL" => "N",
"PARENT_SECTION" => "",
"PARENT_SECTION_CODE" => "",
"INCLUDE_SUBSECTIONS" => "Y",
"DISPLAY_TOP_PAGER" => "N",
"DISPLAY_BOTTOM_PAGER" => "N",
"PAGER_TITLE" => "Новости",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => "",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"BUTTON_TEXT" => "more info",
"AJAX_OPTION_ADDITIONAL" => ""
),
false
);?>Тогда для того, чтобы вывести элементы только нужного нам раздела инфоблока перед компонента необходимо будет разместить код фильтра. В нашем случае он будет выглядеть:
<?$GLOBALS['arrFilter'] = array("SECTION_CODE"=>"MAIN_PAGE");?>Теперь мы можем разместить фильтр и вызов компонента во включаемой области для страницы или раздела. Следует лишь помнить, что мы уже использовали в шаблон контейнер class="row", поэтому, если мы повторно поместим его в ещё один такой же контейнер, то вёрстка будет повреждена!
Мы воспользуемся компонентом включаемой области для страницы и подключим его в шаблоне сайта:
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "page",
"AREA_FILE_SUFFIX" => "teasers",
"EDIT_TEMPLATE" => ""
)
);?>Тогда фильтр и компонент списка тизеров необходимо будет положить в файл index_teasers.php в корне сайта.
Если для какой-то страницы нам надо будет вывести тизеры, то просто разместим в разделе рядом с ней файл с именем ИМЯ_СТРАНИЦЫ_teasers.php.
В результате получился функционал аналогичный эталону:
Демо-данные (2 раздела по 4 тизера в каждом) доступны в нашем репозитории на Github вместе с результатами урока. Для импорта в наличии XML и папка с картинками.
Вы можете импортировать демо-данные в 1С-Битрикс с любой кодировкой, в любом имеющийся тип инфоблоков (если там нет соответствующего инфоблока, то он создастся со всеми настройками, описанными в данном уроке).
Не забудьте удалить ненужные более картинки из папки /img/ в шаблоне! Они занимают лишнее место и мешают работать с оставшимися.
Обратите внимание, что завершив данный урок, фактически мы завершили интеграцию каркаса шаблона! Все последующие уроки будут посвящены интеграции дизайна компонентов рабочей области, а значит уже сейчас шаблон можно использовать в практических целях (размещая статические блоки информации внутри рабочей области или пользуясь дефолтными шаблонами).
Как всегда результаты урока в репозитории на .
