В рамках 14 урока мы разберём реализацию страницы Services: 2 вида 1 колоночных списков, 2-х колоночный список с анонсами и анонс случайной статьи:
Как видим, количество элементов, которые мы реализуем в рамках 1 урока заметно увеличилось. Это связано с тем, что на данной странице нет принципиально сложных сервисов и мы будем пользоваться наработками предыдущих уроков.
Так же обратим внимание на то, что нижнюю область (анонс статьи и список новых сервисов мы вынесем во включаемую область для раздела)
Свернуть/Развернуть исходный код списка Логотипов
Для начала создадим тестовую страницу, где мы будем вести разработку каждого из шаблонов компонентов (например, 1.php), которую необходимо будет удалить после завершения работы.
Сразу же создадим раздел /services/ и индексную страницу в нём.
На странице /serviсes/index/php разместим включаемую область для раздела (в качестве суфикса имени файла включаемой области будем использовать services_footer):
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "sect",
"AREA_FILE_SUFFIX" => "services_footer",
"AREA_FILE_RECURSIVE" => "Y",
"EDIT_TEMPLATE" => ""
)
);?>
Внутрь включаемой области мы поместим выделенную синим на макете часть страницы (она будет общей для всех страница раздела, если иное не задано в наследуемом файле включаемой области).
Одноколоночный список элементов
Сразу обратим внимание на важную особенность данного макета - одноколоночные списки в основной и дополнительной частях страницы имеют разную ширину!
-
Сверху (основная часть) - 1/4 часть ширины страницы (div class="span3");
-
Снизу (дополнительная часть) - 1/3 часть ширины страницы (div class="span4").
| Примечание. Поскольку мы интегрируем Bootstrap макет, то ширина блоков задаётся количеством "колонок", которые отводятся на каждую блока. Всего страница разбивается на 12 колонок. |
Естественно, можно задать 2 разных шаблона (а если нам понадобится одноколоночный список другой ширины, то и больше), однако эффективнее просто отрегулировать ширину блока параметром компонента.
Так же заметим, что перед списком выводится заголовок. Поскольку наша страница будет содержать множество разных компонентов, то для удобства редактором заголовок так же следует сделать параметром (и не забыть про проверку - в случае если заголовок пустой не выводить ничего). Мы уже так делали в прошлых уроках для 2 и 4 колоночных списков (а так же выводили небольшой поясняющий текст перед списком из другого параметра, что нам не нужно в макете, но слишком трудно, поэтому мы реализуем).
За основу мы возьмём компонент, который был сделан нами в Уроке 10+ (если вы его пропустили, просто скопируйте из репозитория шаблон 1_column компонента bitrix:news.list).
Фактически нам потребуется внести минимальное количество изменений, поэтому мы не будем создавать копию. Однако постараемся сохранить обратную совместимость (чтобы весь функционал Урока 10+ работал в прежнем режиме):
-
Добавим параметр выбора ширины блока (в случае если параметр не установлен будем брать ширину равную 4 колонкам).
-
Добавим параметр вывода Заголовка перед списком (если пуст не будем выводить тегов оформления), по аналогии с Уроком 10.
-
Добавим параметр вывода текста между заголовком и списком (если пуст не будем выводить тегов оформления), по аналогии с Уроком 10.
-
Добавим параметры ссылки (текст и URL) после списка (если пуст текст, то не будем выводить), по аналогии с Уроком 10.
Мы разберём только 1-й пункт (т.е. все остальные можно скопировать из 10 урока и мы покажем далее готовый шаблон).
Итак, в параметрах компонента в шаблоне компонента (.parameters.php) заведём параметр типа "список" с 2 значениями (1/3 и 1/4 ширины страницы):
"1_COL_WIDTH" => array(
"NAME" => GetMessage("1_COL_WIDTH"),
"TYPE" => "LIST",
"VALUES" => array(
"4" => GetMessage("1_COL_WIDTH_4"),
"3" => GetMessage("1_COL_WIDTH_3")
),
),
В языковом файле (пример показан только для русского языка, для английского и других языков по необходимости код будет отличаться только текстом фраз):
$MESS ['1_COL_WIDTH'] = "Ширина блока списка";
$MESS ['1_COL_WIDTH_3'] = "1/4 ширины страницы";
$MESS ['1_COL_WIDTH_4'] = "1/3 ширины страницы";
Как видите, мы реализовали в параметрах компонента только 2 значения этого параметра. Это означает, что для выбора в режиме редактирования параметров (в визуальном интерфейсе 1С-Битрикс) будут доступны только они. Однако мы используем числовые значения не зря, а значит, опытный администратор при желании сможет в явном виде задать значение параметра даже не прибегая к редактированию .prameters.php!
В шаблоне реализуем подстановку одного из значений в зависимости от параметра (и дефолтное значение в случае, если параметр не установлен). Ниже приведём только код определения класса блока (задающий его ширину и положение) по параметрам:
<?
$col_class = ''; //Объявляем пустую переменную
if (IntVal($arParams["1_COL_WIDTH"]) > 0) //Проверяем параметр ширины (фильтруем чтобы на выход попадали только ЧИСЛОВЫЕ значения параметра).
$col_class = 'span' . IntVal($arParams["1_COL_WIDTH"]); //Если параметр не пуст, присваиваем его значение переменной
else
$col_class = 'span4'; //Иначе ставим значение "по-умолчанию"
if ($arParams['COL_TYPE_LEFT'] == 'Y')
$col_class .= ' left-0'; //Проверяем включен ли параметр "левая колонка" и добавляем соответствующий класс
?>
Тогда полный код шаблона компонента будет:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
?>
<?
$col_class = ''; //Объявляем пустую переменную
if (IntVal($arParams["1_COL_WIDTH"]) > 0) //Проверяем параметр ширины (фильтруем чтобы на выход попадали только ЧИСЛОВЫЕ значения параметра).
$col_class = 'span' . IntVal($arParams["1_COL_WIDTH"]); //Если параметр не пуст, присваиваем его значение переменной
else
$col_class = 'span4'; //Иначе ставим значение "по-умолчанию"
if ($arParams['COL_TYPE_LEFT'] == 'Y')
$col_class .= ' left-0'; //Проверяем включен ли параметр "левая колонка" и добавляем соответствующий класс
?>
<div class="<?=$col_class?>">
<?if (!empty($arParams["1_COL_TITLE"])):?><h4 class="indent-1"><?=$arParams['1_COL_TITLE']?>:</h4><?endif?>
<?if (!empty($arParams["1_COL_INTRO_TEXT"])):?><p class="lead"><?=$arParams['1_COL_INTRO_TEXT']?></p><?endif?>
<ul class="list"><?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 id="<?=$this->GetEditAreaId($arItem['ID']);?>"><a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><?echo $arItem["NAME"]?></a></li>
<?endforeach;?></ul>
<?if (!empty($arParams["1_COL_MORE_LINK"]) && !empty($arParams["1_COL_MORE_NAME"])):?><a href="<?=$arParams['1_COL_MORE_LINK']?>" class="link"><?=$arParams['1_COL_MORE_NAME']?></a><?endif?>
</div>
Создадим инфоблок "Услуги" с символьным кодом "SERVICES".
Статья не завершена.
Окончание статьи не планируется, т.к. в 2015 году уже доступна Alfa версия Bootstrap 4, а данный шаблон использует Bootstrap 2 (т.е. серьёзно устарел). Рекомендуем ознакомиться с другими нашими статьями.
