В этой статье я поделюсь с читателем информацией о том, как это можно сделать. Причем выполнять в шаблоне какие-либо вычисления не понадобиться.
Итак, приступаем. Для начала скачайте с сайта «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
В файл .lang/ru/.parameters.php добавьте следующую строку:
PHP
Если вы планируете использовать этот шаблон на многоязычном сайте, то аналогичные строки нужно будет добавить еще и в файлы .lang/язык/.parameters.php. Например, в .lang/en/.parameters.php.
PHP
Теперь можно указать количество колонок в настройках компонента. Сделать это можно из публичной части в режиме правки, или добавить еще один параметр в массив настроек в коде вызова компонента на вашей странице.
PHP
Переходим к изменению файла template.php. Что же может помочь нам разделить массив новостей (или других элементов инфоблока) на несколько частей для показа на странице в несколько колонок? Ответ несложен – это PHP-функция array_chunk(), которая разбивает массив на несколько массивов с указанным количеством элементов. В нашем случае количество элементов (новостей) в массиве будет браться из параметров вызова компонента, а именно из $arParams[“NUM_COLS”]
. Кстати, если массив $arResult["ITEMS"]
не разделится без остатка, ничего страшного не произойдет, функция допускает, что последний массив из полученных может содержать меньшее количество значений, чем указано.
Изменим шаблон компонента следующим образом.
PHP
Я не стану приводить здесь весь код шаблона, для того, чтобы читатель не запутался и уловил суть. Ознакомиться с кодом шаблона компонента полностью можно будет скачав его по ссылке в конце статьи.
Итак, в коде ничего сложного: разделяем массив $arResult["ITEMS"]
на массивы, состоящие из количества элементов, указанного в параметре $arParams[“NUM_COLS”]
– выводим блок с классом “row”
. Внутри этого цикла размещаем еще один цикл, который выводит блоки с классом “item”
и содержимым новости внутри себя.
Таким образом у нас получается, что блоки с классом “item”
будут выстраиваться в колонки, для этого остается только добавить им несколько CSS-стилей. Создадим CSS-правила в файле стилей шаблона компонента (style.css).
CSS
Обратите внимание, что самое главное вычислить ширину блока с содержимым новости, что и сделано в атрибуте style
блока с классом “item”
. Если этого не сделать, то выстроить элементы в колонки не получится. Если в своем проекте вы используете какой-либо CSS-фреймворк, например, Bootstrap, вы можете устанавливать ширину блока с содержимым новости на основе классов фреймворка. Тогда вычисления в атрибуте style
не потребуются.
Вот таким несложным образом можно создать шаблон с выводом элементов инфоблока (новостей, статей и прочих) в несколько колонок.