Матвей Земсков

Заметки веб-мастера

Воскресенье, 20 апреля 2014 17:30

Выводим элементы инфоблоков в несколько колонок

Оцените материал
(5 голосов)

В шаблонах некоторых компонентов «1с-Битрикс» предусмотрена возможность вывода элементов инфоблока в несколько колонок. В частности, это касается компонента bitrix:catalaog.section и его шаблона .default. Количество колонок берется из массива настроек, который передается при вызове компонента. Затем на основе некоторых вычислений в шаблоне элементы инфоблока (товары каталога) выводятся в таблице с определенным количеством колонок. В процессе разработки сайта может возникнуть потребность выводить в несколько колонок, например, не товары, а новости или статьи. К сожалению в шаблонах компонента bitirx:news.list не предусмотрена возможность разделения страницы на колонки для размещения элементов.

В этой статье я поделюсь с читателем информацией о том, как это можно сделать. Причем выполнять в шаблоне какие-либо вычисления не понадобиться.

Итак, приступаем. Для начала скачайте с сайта «1С-Битрикс» демо-версию системы. Подойдет любая редакция. Я обычно работаю с редакцией «Стандарт» . После загрузки установите ее на локальный веб-сервер (например, в «Битрикс Веб-окружение»). В процессе установки при выборе типа устанавливаемого сайта из списка выберите «Версию для разработчиков».

Создайте новую страницу и разместите на ней компонент bitrix:news.list. Сделайте настройки: укажите инфоблок («Новости магазина») и количество новостей на странице: 10 или 15. Изначально новостей в демо-версии не так много, поэтому для наглядности вы можете сделать копии существующих новостей или добавить свои новости.

Теперь нужно скопировать шаблон компонента в папку шаблона своего сайта или в общий шаблон сайт (/bitrix/templates/.default). Я назвал новый шаблон компонента bitrix:news.list - “num_cols”, вы можете придумать другое название или воспользоваться моим.

Все изменения мы будем проводить в папке нашего шаблона компонента /bitrix/templates/.default/components/bitrix/news.list/num_cols/.

Добавим в файл .parameters.php в массив $arTemplateParameters еще один элемент. Он будет отображаться в настройках компонента и в нем бы будем сохранять количество колонок, в которые буду выводиться элементы инфоблока.

PHP

$arTemplateParameters = array(
	…
	"COLS_NUMBER" => Array(
		"NAME" => GetMessage("T_IBLOCK_DESC_COLS_NUMBER"),
		"TYPE" => "STRING",
		"DEFAULT" => "",
	),
);

В файл .lang/ru/.parameters.php добавьте следующую строку:

PHP

$MESS ['T_IBLOCK_DESC_COLS_NUMBER'] = "Количество колонок";

Если вы планируете использовать этот шаблон на многоязычном сайте, то аналогичные строки нужно будет добавить еще и в файлы .lang/язык/.parameters.php. Например, в .lang/en/.parameters.php.

PHP

$MESS ['T_IBLOCK_DESC_COLS_NUMBER'] = "Number of columns";

Теперь можно указать количество колонок в настройках компонента. Сделать это можно из публичной части в режиме правки, или добавить еще один параметр в массив настроек в коде вызова компонента на вашей странице.

Добавление своих настроек в шаблон компонента

PHP

"COLS_NUMBER" => "2",

Переходим к изменению файла template.php. Что же может помочь нам разделить массив новостей (или других элементов инфоблока) на несколько частей для показа на странице в несколько колонок? Ответ несложен – это PHP-функция array_chunk(), которая разбивает массив на несколько массивов с указанным количеством элементов. В нашем случае количество элементов (новостей) в массиве будет браться из параметров вызова компонента, а именно из $arParams[“NUM_COLS”]. Кстати, если массив $arResult["ITEMS"] не разделится без остатка, ничего страшного не произойдет, функция допускает, что последний массив из полученных может содержать меньшее количество значений, чем указано.

Изменим шаблон компонента следующим образом.

PHP

<?foreach(array_chunk($arResult["ITEMS"], $arParams["COLS_NUMBER"]) as $arPartItems):?>
 <div class="row">
 	<?foreach($arPartItems 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')));
		?>
 		<div class="item" id="<?=$this->GetEditAreaId($arItem['ID']);?>" style="width:<?=floor(100/intval($arParams["COLS_NUMBER"]));?>%;">
		…
		/* здесь выводим данные об элементе: название, дату публикации, изображение для анонса, значение свойств */
		…
		</div>
	<?endforeach;?> 
<?endforeach;?>

Я не стану приводить здесь весь код шаблона, для того, чтобы читатель не запутался и уловил суть. Ознакомиться с кодом шаблона компонента полностью можно будет скачав его по ссылке в конце статьи.

Итак, в коде ничего сложного: разделяем массив $arResult["ITEMS"] на массивы, состоящие из количества элементов, указанного в параметре $arParams[“NUM_COLS”] – выводим блок с классом “row”. Внутри этого цикла размещаем еще один цикл, который выводит блоки с классом “item” и содержимым новости внутри себя.

Таким образом у нас получается, что блоки с классом “item” будут выстраиваться в колонки, для этого остается только добавить им несколько CSS-стилей. Создадим CSS-правила в файле стилей шаблона компонента (style.css).

CSS

div .row{overflow: hidden;}
div.item{float: left;}

Обратите внимание, что самое главное вычислить ширину блока с содержимым новости, что и сделано в атрибуте style блока с классом “item”. Если этого не сделать, то выстроить элементы в колонки не получится. Если в своем проекте вы используете какой-либо CSS-фреймворк, например, Bootstrap, вы можете устанавливать ширину блока с содержимым новости на основе классов фреймворка. Тогда вычисления в атрибуте style не потребуются.

Вот таким несложным образом можно создать шаблон с выводом элементов инфоблока (новостей, статей и прочих) в несколько колонок.

Скачать код шаблона компонента

Прочитано 9066 раз
Добавить комментарий

Комментарии   

 
+1 # Валерий Егоров 18.10.2014 09:30
Матвей, очень полезный материал. Скачал, проверил, ВСЕ РАБОТАЕТ, без единой правки :-) !!!
Класс! Так держать. Блог в закладках...
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Дмитрий 04.01.2015 11:57
А как сделать тоже самое, но для комплексного компонента новости ?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 12.01.2015 09:23
Также как и для простого компонента. Ведь комплексный компонент, по сути, состоит из простых.
Только параметры нужно добавлять в файл .parameters.php расположенный в папке шаблона комплексного компонента, например: /bitrix/templates/ваш_шаблон/components/bitrix/new s/ваш_шаблон_комплексного_компонента/.parameters.p hp.
Языковые файлы находятся в папке lang по указанному пути. При вызове простого компонента списка news.list в файле news.php комплексного компонента нужно не забыть указать в параметрах "COLS_NUMBER" => $arParams["COLS_NUMBER"].
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Aleksandr 04.02.2016 12:59
Большое спасибо за решение очень сильно выручили всё очень понятно и доходчиво. :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 04.02.2016 17:38
Пожалуйста, Александр! Рад, что статья помогла решить вашу задачу.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Jack 23.11.2016 12:07
Такой вопрос: а можно ли применить эту тактику к news.list`у внутри компонента news? Ведь если у него исправить соответствующие файлы parameters.php, то в настройках компонента окошко "Количество колонок" не появляется и если внутри шаброна и можно было бы обработать деление на колонки, то как передать эту переменную?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 23.11.2016 13:38
Сначала копируем шаблон комплексного компонента. Затем можно добавить этот элемент с подписью в файл .parameters.php скопированного шаблона, но можно этого и не делать. Значение параметра можно передать следующим образом: на странице вызова компонента добавляем в массив нужный параметр (COLS_NUMBER),в файле news.php скопированного шаблона добавляем в вызов news.list параметр COLS_NUMBER в следующем виде "COLS_NUMBER"=>$arParams["COLS_NUMBER"]
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: