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

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

Итак, приступаем. Для начала скачайте с сайта «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;?>
 </div> 
<?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 не потребуются.

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

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