Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 10


В 10 уроке мы сделаем компонент для 2-х колоночного списка на главной странице:

2х колоночный список на широком экране

Выводится этот блок следующей разметкой из макета:

<h4 class="indent-1">our Capabilities:</h4>
<p class="lead">Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturien.</p>
<div class="lists">
<div class="span4 left-0">
<ul class="list">
<li><a href="#">Praesent vestibulum molestie lacus aenean</a></li>
<li><a href="#">nonummy hendrerit mauris</a></li>
<li><a href="#">Phasellus porta fusce suscipit varius mi</a></li>
<li><a href="#">Cum sociis natoque penatibus et magnis dis</a></li>
</ul>
</div>
<div class="span4">
<ul class="list">
<li><a href="#">Praesent vestibulum molestie lacus aenean</a></li>
<li><a href="#">nonummy hendrerit mauris</a></li>
<li><a href="#">Phasellus porta fusce suscipit varius mi</a></li>
<li><a href="#">Cum sociis natoque penatibus et magnis dis</a></li>
</ul>
</div>
</div>
<a href="#" class="link">More Info</a>

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

2х колоночный список на узком экране

Раздел "Our Capabilities" расположен на 3 уровне структуры сайта (если судить по главному меню) и его содержимое не представлено на макетах, поэтому мы не знаем что за элементы представлены в списке:

  • элементы инфоблока
  • разделы инфоблока
  • разделы сайта
  • разделы 1й страницы (например со ссылками-якорями на конкретные места)

Обычно в таких случаях имеет смысл оставить статическую вёрстку (возможно вынеся её во включаемую область, дабы защитить от неквалифицированных редакторов), однако мы в целях обучения сделаем 2 компонента.

 

2-х колоночный список элементов инфоблока 

Возьмём наш любимый компонент bitrix:news.list и шаблон .default скопируем в шаблон сайта, переименовав в 2_columns.

Разделение списка на 2 части осуществит код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
// Пролог
$d = ceil(count($arResult["ITEMS"])/2);
// Делим число элементов списка на 2 и округляем в большую сторону.
$i = 0;
// Обнуляем счётчик
?>

<ul><?foreach($arResult["ITEMS"] as $arItem):?>
<!-- Начинаем цикл перебора элементов. Открыли список -->
<?if( $i > 0 && $i%$d == 0):?></ul><ul><?endif;?>
<!-- Проверяем положение счётчика. Как только счётчик дойдёт до середины списка (определена выше) закрываем список и открываем новый -->
<li><?echo $arItem["NAME"]?></li>
<!-- Выводим элемент списка -->
<?$i++;?>
<!-- Увеличиваем счётчик на 1. После этого можно будет цикл завершить и окончательно закрыть список -->
<?endforeach;?>
</ul>

ceil используется для округления в большую сторону, т.е. если список нечётный, то в первом/левом столбце будет на 1 элемент больше. Если нужно получить больше элементов во втором столбце - округлите результат деления в меньшую сторону с помощью floor.

Так же обращаем внимание, что делитель можно вынести в параметры и заменить на другое число. Тогда количество столбцов изменится. Мы не делаем этого потому, что у нас есть жёсткая привязка к ширине столбца в вёрстке этих блоков - 3 таких блока просто не вместятся в сетку!

Создадим 4 параметра (в .parameters,php), для задания элементов, которые может быть полезным вывести в рамках компонента, а не оставлять статическими:

  1. Заголовок блока
  2. Вводный текст
  3. Текст ссылки "More" после блока
  4. Адрес ссылки "More" после блока

1 и 2 параметры будем проверять на заполненность, и если они пусты, не будем выводить пустую разметку.

3 и 4 параметр следует проверять оба на пустоту для вывода ссылки:

<?if (!empty($arParams["2_COL_MORE_LINK"]) && !empty($arParams["2_COL_MORE_NAME"])):?>

Не забудем про языковые фразы для всех 4 параметров.

Итоговый шаблон компонента будет выглядеть:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$d = ceil(count($arResult["ITEMS"])/2);
$i = 0;
?>

<?if (!empty($arParams["2_COL_TITLE"])):?><h4 class="indent-1"><?=$arParams['2_COL_TITLE']?>:</h4><?endif?>
<?if (!empty($arParams["2_COL_INTRO_TEXT"])):?><p class="lead"><?=$arParams['2_COL_INTRO_TEXT']?></p><?endif?>
<div class="lists">
<div class="span4 left-0">
<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')));
?>
<?if( $i > 0 && $i%$d == 0):?></ul></div><div class="span4"><ul class="list"><?endif;?>
<li id="<?=$this->GetEditAreaId($arItem['ID']);?>"><a href="<?echo $arItem["DETAIL_PAGE_URL"]?>"><?echo $arItem["NAME"]?></a></li>
<?$i++;?>
<?endforeach;?></ul>
</div>
</div>
<?if (!empty($arParams["2_COL_MORE_LINK"]) && !empty($arParams["2_COL_MORE_NAME"])):?><a href="<?=$arParams['2_COL_MORE_LINK']?>" class="link"><?=$arParams['2_COL_MORE_NAME']?></a><?endif?>

Осталось только вызвать компонент на главной странице

<?$APPLICATION->IncludeComponent("bitrix:news.list", "2_columns", array(
"IBLOCK_TYPE" => "-",
"IBLOCK_ID" => "NEWS",
"NEWS_COUNT" => "20",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"FILTER_NAME" => "",
"FIELD_CODE" => array(
0 => "",
1 => "",
),
"PROPERTY_CODE" => array(
0 => "",
1 => "",
),
"CHECK_DATES" => "Y",
"DETAIL_URL" => "",
"AJAX_MODE" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"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" => "Y",
"SET_STATUS_404" => "N",
"INCLUDE_IBLOCK_INTO_CHAIN" => "Y",
"ADD_SECTIONS_CHAIN" => "Y",
"HIDE_LINK_WHEN_NO_DETAIL" => "N",
"PARENT_SECTION" => "",
"PARENT_SECTION_CODE" => "",
"INCLUDE_SUBSECTIONS" => "Y",
"DISPLAY_TOP_PAGER" => "N",
"DISPLAY_BOTTOM_PAGER" => "Y",
"PAGER_TITLE" => "Новости",
"PAGER_SHOW_ALWAYS" => "Y",
"PAGER_TEMPLATE" => "",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "Y",
"2_COL_TITLE" => "Наши Новости",
"2_COL_INTRO_TEXT" => "В данном двухколоночном списке представлены возможности данного шаблона компонента, которые вы можете штатно использовать без дополнительных доработок. Для демонстрации используется инфоблок новостей, поскольку нет оснований для создания ещё одного инфоблока.",
"2_COL_MORE_NAME" => "Ещё",
"2_COL_MORE_LINK" => "/about/news/",
"AJAX_OPTION_ADDITIONAL" => ""
),
false
);?>

Фактически, мы реализовали вывод блока двухколоночного списка элементов инфоблока! С помощью старого доброго new.list.


2-х колоночный список разделов инфоблока 

Возьмём компонент bitrix:catalog.section.list и скопируем шаблон компонента .default в шаблон сайта, переименовав в 2_columns.

Обратим внимание, что данный компонент умеет выводить несколько уровней разделов инфоблока и даже сохранять их иерархическую структуру.

К сожалению, нельзя эффективно разработать шаблон в условиях общей задачи без конкретизации условий (когда может 2-3 и более уровней вложенности и нет понимания у как будут расположены друг относительно друга разделы) так, чтобы это ещё и выглядело красиво.

В связи с этим, мы сведём задачу к более простой и будем отображать все разделы на одном уровне вне зависимости от их реального положения, оставив возможность в настройках компонента задать уровень вложенности:

глубина отображения разделов компонента списка (2х колоночного)

В этом случае шаблон компонента будет практически идентичен шаблону компонента списка новостей (отличие лишь в переборе массива по ключу $arResult["SECTIONS"] вместо $arResult["ITEMS"]).

Аналогично предыдущей части вводятся и параметры компонента (не забудьте про их языковые файлы) в .parameters.php.

Добавим лишь небольшую фишку из дефолтного компонента списка разделов:

<?if($arParams["COUNT_ELEMENTS"]):?>&nbsp;(<?=$arSection["ELEMENT_CNT"]?>)<?endif;?>

Этот код выведет после названия раздела инфоблока число находящихся в нём элементов (при условии, что в параметрах компонента разрешён вывод этой информации):

параметр вывода количества элементов в разделе инфоблока (для компонента 2х колоночного списка)

Тогда полный код шаблона будет выглядеть следующим образом:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$d = ceil(count($arResult["SECTIONS"])/2);
$i = 0;
?>

<?if (!empty($arParams["2_COL_TITLE"])):?><h4 class="indent-1"><?=$arParams['2_COL_TITLE']?>:</h4><?endif?>
<?if (!empty($arParams["2_COL_INTRO_TEXT"])):?><p class="lead"><?=$arParams['2_COL_INTRO_TEXT']?></p><?endif?>
<div class="lists">
<div class="span4 left-0">
<ul class="list"><?foreach($arResult["SECTIONS"] as $arSection):?>
<?
$this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], CIBlock::GetArrayByID($arSection["IBLOCK_ID"], "ELEMENT_EDIT"));
$this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], CIBlock::GetArrayByID($arSection["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
?>

<?if( $i > 0 && $i%$d == 0):?></ul></div><div class="span4"><ul class="list"><?endif;?>
<li id="<?=$this->GetEditAreaId($arSection['ID']);?>"><a href="<?=$arSection["SECTION_PAGE_URL"]?>"><?echo $arSection["NAME"]?><?if($arParams["COUNT_ELEMENTS"]):?>&nbsp;(<?=$arSection["ELEMENT_CNT"]?>)<?endif;?></a></li>
<?$i++;?>
<?endforeach;?></ul>
</div>
</div>
<?if (!empty($arParams["2_COL_MORE_LINK"]) && !empty($arParams["2_COL_MORE_NAME"])):?><a href="<?=$arParams['2_COL_MORE_LINK']?>" class="link"><?=$arParams['2_COL_MORE_NAME']?></a><?endif?>

И останется только вызвать компонент на главной странице:

<?$APPLICATION->IncludeComponent("bitrix:catalog.section.list", "2_columns", array(
"IBLOCK_TYPE" => "-",
"IBLOCK_ID" => "3",
"SECTION_ID" => $_REQUEST["SECTION_ID"],
"SECTION_CODE" => "",
"COUNT_ELEMENTS" => "Y",
"TOP_DEPTH" => "3",
"SECTION_FIELDS" => array(
0 => "",
1 => "",
),
"SECTION_USER_FIELDS" => array(
0 => "",
1 => "",
),
"SECTION_URL" => "",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "36000000",
"CACHE_GROUPS" => "Y",
"ADD_SECTIONS_CHAIN" => "Y",
"2_COL_TITLE" => "Наши Возможности",
"2_COL_INTRO_TEXT" => "В данном двухколоночном списке представлены возможности данного шаблона, которые вы можете штатно использовать без дополнительных доработок. В отличие от компонента представленного выше, это компонент вывода разделов инфоблока.",
"2_COL_MORE_NAME" => "Ещё",
"2_COL_MORE_LINK" => "#"
), false
);?>

Обратите внимание, что этот компонент, в отличие от компонента списка новостей не умеет работать с символьным кодом инфоблока!!! Необходимо указать ID! Это важно, если вы переносите код с проекта на проект и там разная нумерация инфоблоков!

 

В демо-материалах к данному уроку вы увидите на главной странице оба этих компонента.

Так же обратите внимание, что в целях демонстрации возможностей этих компонентов мы обновили набор демо-данных для инфоблока новостей (там появились новые элементы и разделы), так что если вы произвели импорт в предыдущих уроках - просто повторите процесс для инфоблока с кодом NEWS (у нас его ID=3).

2х колоночный список в публичной части с помощью 2 разных компонентов 1С-Битрикс (списка разделов и списка элементов Инфоблока)

 

На этом мы завершаем интеграцию компонентов главной страницы. Оставшийся контент проще разместить в виде статической вёрстки, чем разрабатывать сколько-нибудь универсальный шаблон.

Одном из последующих уроков мы создадим шаблоны страниц, которые позволят создавать заготовки с контентом, для упрощения создания такой страницы контент-редактором.

 

Демо-материалы и результаты урока, как всегда размещены в нашем репозитории на GitHub.


Выбор освещений для промыщенных помещений в Тюмени на https://tumen.e-looch.ru/series/obshheprom/.

Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 10

<p><b>В 10 уроке мы сделаем компонент для 2-х колоночного списка на главной странице:</b></p> <p><img src="/upload/medialibrary/55b/55b2dd91d363728b7425d62f3aa1c87a.png" title="2х колоночный список на широком экране" hspace="5" vspace="5" border="0" alt="2х колоночный список на широком экране" width="700" height="250" /></p> <p>Выводится этот блок следующей разметкой из макета:</p> <div style="border: 1px solid; padding: 10px;"><code class="HTML">&lt;h4 class=&quot;indent-1&quot;&gt;our Capabilities:&lt;/h4&gt; <br /> &lt;p class=&quot;lead&quot;&gt;Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturien.&lt;/p&gt; <br /> &lt;div class=&quot;lists&quot;&gt; <br /> &lt;div class=&quot;span4 left-0&quot;&gt; <br /> &lt;ul class=&quot;list&quot;&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Praesent vestibulum molestie lacus aenean&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nonummy hendrerit mauris&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Phasellus porta fusce suscipit varius mi&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cum sociis natoque penatibus et magnis dis&lt;/a&gt;&lt;/li&gt; <br /> &lt;/ul&gt; <br /> &lt;/div&gt; <br /> &lt;div class=&quot;span4&quot;&gt; <br /> &lt;ul class=&quot;list&quot;&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Praesent vestibulum molestie lacus aenean&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nonummy hendrerit mauris&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Phasellus porta fusce suscipit varius mi&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cum sociis natoque penatibus et magnis dis&lt;/a&gt;&lt;/li&gt; <br /> &lt;/ul&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt; <br /> &lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;More Info&lt;/a&gt;</code></div> <p>Обратим внимание на то, что при уменьшении ширины колонки располагаются одна над другой, т.е. логически правая колонка списка - продолжение левой:</p> <p><img src="/upload/medialibrary/e9e/e9efff5a8693bb0af6fa050316049a85.png" title="2х колоночный список на узком экране" hspace="5" vspace="5" border="0" alt="2х колоночный список на узком экране" width="498" height="437" /></p> <p>Раздел &quot;Our Capabilities&quot; расположен на 3 уровне структуры сайта (если судить по главному меню) и его содержимое не представлено на макетах, поэтому мы не знаем что за элементы представлены в списке:</p> <p> </p> <ul> <li>элементы инфоблока</li> <li>разделы инфоблока</li> <li>разделы сайта</li> <li>разделы 1й страницы (например со ссылками-якорями на конкретные места)</li> </ul> <p></p> <p>Обычно в таких случаях имеет смысл оставить статическую вёрстку (возможно вынеся её во включаемую область, дабы защитить от неквалифицированных редакторов), однако мы в целях обучения сделаем 2 компонента.</p> <p> </p> <h2>2-х колоночный список элементов инфоблока </h2> <p>Возьмём наш любимый компонент bitrix:news.list и шаблон .default скопируем в шаблон сайта, переименовав в 2_columns.</p> <p>Разделение списка на 2 части осуществит код:</p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?if(!defined(&quot;B_PROLOG_INCLUDED&quot;) || B_PROLOG_INCLUDED!==true)die(); <br /> <font color="#00a650">// Пролог</font> <br /> $d = ceil(count($arResult[&quot;ITEMS&quot;])/2); <br /> <font color="#00a650">// Делим число элементов списка на 2 и округляем в большую сторону.</font> <br /> $i = 0; <br /> <font color="#00a650">// Обнуляем счётчик</font> <br /> ?&gt; <br /> <br /> &lt;ul&gt;&lt;?foreach($arResult[&quot;ITEMS&quot;] as $arItem):?&gt; <br /> <font color="#00a650">&lt;!-- Начинаем цикл перебора элементов. Открыли список --&gt;</font> <br /> &lt;?if( $i &gt; 0 &amp;&amp; $i%$d == 0):?&gt;&lt;/ul&gt;&lt;ul&gt;&lt;?endif;?&gt; <br /> <font color="#00a650">&lt;!-- Проверяем положение счётчика. Как только счётчик дойдёт до середины списка (определена выше) закрываем список и открываем новый --&gt; </font> <br /> &lt;li&gt;&lt;?echo $arItem[&quot;NAME&quot;]?&gt;&lt;/li&gt; <br /> <font color="#00a650">&lt;!-- Выводим элемент списка --&gt;</font> <br /> &lt;?$i++;?&gt; <br /> <font color="#00a650">&lt;!-- Увеличиваем счётчик на 1. После этого можно будет цикл завершить и окончательно закрыть список --&gt;</font> <br /> &lt;?endforeach;?&gt; <br /> &lt;/ul&gt;</code></div> <p>ceil используется для округления в большую сторону, т.е. если список нечётный, то в первом/левом столбце будет на 1 элемент больше. Если нужно получить больше элементов во втором столбце - округлите результат деления в меньшую сторону с помощью floor. </p> <p><i>Так же обращаем внимание, что делитель можно вынести в параметры и заменить на другое число. Тогда количество столбцов изменится. Мы не делаем этого потому, что у нас есть жёсткая привязка к ширине столбца в вёрстке этих блоков - 3 таких блока просто не вместятся в сетку!</i></p> <p> Создадим 4 параметра (в .parameters,php), для задания элементов, которые может быть полезным вывести в рамках компонента, а не оставлять статическими: </p> <p> </p> <ol> <li>Заголовок блока</li> <li>Вводный текст</li> <li>Текст ссылки &quot;More&quot; после блока</li> <li>Адрес ссылки &quot;More&quot; после блока</li> </ol> <p></p> <p>1 и 2 параметры будем проверять на заполненность, и если они пусты, не будем выводить пустую разметку.</p> <p>3 и 4 параметр следует проверять оба на пустоту для вывода ссылки:</p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?if (!empty($arParams[&quot;2_COL_MORE_LINK&quot;]) &amp;&amp; !empty($arParams[&quot;2_COL_MORE_NAME&quot;])):?&gt;</code></div> <p> Не забудем про языковые фразы для всех 4 параметров. </p> <p>Итоговый шаблон компонента будет выглядеть:</p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?if(!defined(&quot;B_PROLOG_INCLUDED&quot;) || B_PROLOG_INCLUDED!==true)die(); <br /> $d = ceil(count($arResult[&quot;ITEMS&quot;])/2); <br /> $i = 0; <br /> ?&gt; <br /> <br /> &lt;?if (!empty($arParams[&quot;2_COL_TITLE&quot;])):?&gt;&lt;h4 class=&quot;indent-1&quot;&gt;&lt;?=$arParams['2_COL_TITLE']?&gt;:&lt;/h4&gt;&lt;?endif?&gt; <br /> &lt;?if (!empty($arParams[&quot;2_COL_INTRO_TEXT&quot;])):?&gt;&lt;p class=&quot;lead&quot;&gt;&lt;?=$arParams['2_COL_INTRO_TEXT']?&gt;&lt;/p&gt;&lt;?endif?&gt; <br /> &lt;div class=&quot;lists&quot;&gt; <br /> &lt;div class=&quot;span4 left-0&quot;&gt; <br /> &lt;ul class=&quot;list&quot;&gt;&lt;?foreach($arResult[&quot;ITEMS&quot;] as $arItem):?&gt; <br /> &lt;? <br /> $this-&gt;AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem[&quot;IBLOCK_ID&quot;], &quot;ELEMENT_EDIT&quot;)); <br /> $this-&gt;AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem[&quot;IBLOCK_ID&quot;], &quot;ELEMENT_DELETE&quot;), array(&quot;CONFIRM&quot; =&gt; GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM'))); <br /> ?&gt; <br /> &lt;?if( $i &gt; 0 &amp;&amp; $i%$d == 0):?&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;span4&quot;&gt;&lt;ul class=&quot;list&quot;&gt;&lt;?endif;?&gt; <br /> &lt;li id=&quot;&lt;?=$this-&gt;GetEditAreaId($arItem['ID']);?&gt;&quot;&gt;&lt;a href=&quot;&lt;?echo $arItem[&quot;DETAIL_PAGE_URL&quot;]?&gt;&quot;&gt;&lt;?echo $arItem[&quot;NAME&quot;]?&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;?$i++;?&gt; <br /> &lt;?endforeach;?&gt;&lt;/ul&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt; <br /> &lt;?if (!empty($arParams[&quot;2_COL_MORE_LINK&quot;]) &amp;&amp; !empty($arParams[&quot;2_COL_MORE_NAME&quot;])):?&gt;&lt;a href=&quot;&lt;?=$arParams['2_COL_MORE_LINK']?&gt;&quot; class=&quot;link&quot;&gt;&lt;?=$arParams['2_COL_MORE_NAME']?&gt;&lt;/a&gt;&lt;?endif?&gt;</code></div> <p> Осталось только вызвать компонент на главной странице </p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?$APPLICATION-&gt;IncludeComponent(&quot;bitrix:news.list&quot;, &quot;2_columns&quot;, array( <br /> &quot;IBLOCK_TYPE&quot; =&gt; &quot;-&quot;, <br /> &quot;IBLOCK_ID&quot; =&gt; &quot;NEWS&quot;, <br /> &quot;NEWS_COUNT&quot; =&gt; &quot;20&quot;, <br /> &quot;SORT_BY1&quot; =&gt; &quot;ACTIVE_FROM&quot;, <br /> &quot;SORT_ORDER1&quot; =&gt; &quot;DESC&quot;, <br /> &quot;SORT_BY2&quot; =&gt; &quot;SORT&quot;, <br /> &quot;SORT_ORDER2&quot; =&gt; &quot;ASC&quot;, <br /> &quot;FILTER_NAME&quot; =&gt; &quot;&quot;, <br /> &quot;FIELD_CODE&quot; =&gt; array( <br /> 0 =&gt; &quot;&quot;, <br /> 1 =&gt; &quot;&quot;, <br /> ), <br /> &quot;PROPERTY_CODE&quot; =&gt; array( <br /> 0 =&gt; &quot;&quot;, <br /> 1 =&gt; &quot;&quot;, <br /> ), <br /> &quot;CHECK_DATES&quot; =&gt; &quot;Y&quot;, <br /> &quot;DETAIL_URL&quot; =&gt; &quot;&quot;, <br /> &quot;AJAX_MODE&quot; =&gt; &quot;N&quot;, <br /> &quot;AJAX_OPTION_JUMP&quot; =&gt; &quot;N&quot;, <br /> &quot;AJAX_OPTION_STYLE&quot; =&gt; &quot;Y&quot;, <br /> &quot;AJAX_OPTION_HISTORY&quot; =&gt; &quot;N&quot;, <br /> &quot;CACHE_TYPE&quot; =&gt; &quot;A&quot;, <br /> &quot;CACHE_TIME&quot; =&gt; &quot;36000000&quot;, <br /> &quot;CACHE_FILTER&quot; =&gt; &quot;N&quot;, <br /> &quot;CACHE_GROUPS&quot; =&gt; &quot;Y&quot;, <br /> &quot;PREVIEW_TRUNCATE_LEN&quot; =&gt; &quot;&quot;, <br /> &quot;ACTIVE_DATE_FORMAT&quot; =&gt; &quot;d.m.Y&quot;, <br /> &quot;SET_TITLE&quot; =&gt; &quot;Y&quot;, <br /> &quot;SET_STATUS_404&quot; =&gt; &quot;N&quot;, <br /> &quot;INCLUDE_IBLOCK_INTO_CHAIN&quot; =&gt; &quot;Y&quot;, <br /> &quot;ADD_SECTIONS_CHAIN&quot; =&gt; &quot;Y&quot;, <br /> &quot;HIDE_LINK_WHEN_NO_DETAIL&quot; =&gt; &quot;N&quot;, <br /> &quot;PARENT_SECTION&quot; =&gt; &quot;&quot;, <br /> &quot;PARENT_SECTION_CODE&quot; =&gt; &quot;&quot;, <br /> &quot;INCLUDE_SUBSECTIONS&quot; =&gt; &quot;Y&quot;, <br /> &quot;DISPLAY_TOP_PAGER&quot; =&gt; &quot;N&quot;, <br /> &quot;DISPLAY_BOTTOM_PAGER&quot; =&gt; &quot;Y&quot;, <br /> &quot;PAGER_TITLE&quot; =&gt; &quot;Новости&quot;, <br /> &quot;PAGER_SHOW_ALWAYS&quot; =&gt; &quot;Y&quot;, <br /> &quot;PAGER_TEMPLATE&quot; =&gt; &quot;&quot;, <br /> &quot;PAGER_DESC_NUMBERING&quot; =&gt; &quot;N&quot;, <br /> &quot;PAGER_DESC_NUMBERING_CACHE_TIME&quot; =&gt; &quot;36000&quot;, <br /> &quot;PAGER_SHOW_ALL&quot; =&gt; &quot;Y&quot;, <br /> &quot;2_COL_TITLE&quot; =&gt; &quot;Наши Новости&quot;, <br /> &quot;2_COL_INTRO_TEXT&quot; =&gt; &quot;В данном двухколоночном списке представлены возможности данного шаблона компонента, которые вы можете штатно использовать без дополнительных доработок. Для демонстрации используется инфоблок новостей, поскольку нет оснований для создания ещё одного инфоблока.&quot;, <br /> &quot;2_COL_MORE_NAME&quot; =&gt; &quot;Ещё&quot;, <br /> &quot;2_COL_MORE_LINK&quot; =&gt; &quot;/about/news/&quot;, <br /> &quot;AJAX_OPTION_ADDITIONAL&quot; =&gt; &quot;&quot; <br /> ), <br /> false <br /> );?&gt;</code></div> <p> Фактически, <b>мы реализовали вывод блока двухколоночного списка элементов инфоблока!</b> С помощью старого доброго new.list. </p> <p> <br /> </p> <p> </p> <h2>2-х колоночный список разделов инфоблока </h2> <p> Возьмём компонент bitrix:catalog.section.list и скопируем шаблон компонента .default в шаблон сайта, переименовав в 2_columns.</p> <p>Обратим внимание, что данный компонент умеет выводить несколько уровней разделов инфоблока и даже сохранять их иерархическую структуру.</p> <p><font color="#ff0000"><b>К сожалению, нельзя эффективно разработать шаблон в условиях общей задачи без конкретизации условий</b> </font>(когда может 2-3 и более уровней вложенности и нет понимания у как будут расположены друг относительно друга разделы) так, чтобы это ещё и выглядело красиво.</p> <p><font color="#00a650"><u>В связи с этим, мы сведём задачу к более простой и будем отображать все разделы на одном уровне вне зависимости от их реального положения, оставив возможность в настройках компонента задать уровень вложенности</u></font>:</p> <p><img src="/upload/medialibrary/e0e/e0e06354ae080fa9498f0169779c0c86.png" title="глубина отображения разделов компонента списка (2х колоночного)" hspace="5" vspace="5" border="0" alt="глубина отображения разделов компонента списка (2х колоночного)" width="483" height="42" /></p> <p>В этом случае шаблон компонента будет практически идентичен шаблону компонента списка новостей (<font color="#ff0000">отличие лишь в переборе массива по ключу $arResult[&quot;SECTIONS&quot;] вместо $arResult[&quot;ITEMS&quot;]</font>).</p> <p>Аналогично предыдущей части вводятся и параметры компонента (не забудьте про их языковые файлы) в .parameters.php.</p> <p>Добавим лишь небольшую фишку из дефолтного компонента списка разделов:</p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?if($arParams[&quot;COUNT_ELEMENTS&quot;]):?&gt;&amp;nbsp;(&lt;?=$arSection[&quot;ELEMENT_CNT&quot;]?&gt;)&lt;?endif;?&gt;</code></div> <p> Этот код выведет после названия раздела инфоблока число находящихся в нём элементов (при условии, что в параметрах компонента разрешён вывод этой информации): </p> <p><img src="/upload/medialibrary/6ec/6ec5a05102e6c377520e08a85145d5eb.png" title="параметр вывода количества элементов в разделе инфоблока (для компонента 2х колоночного списка)" hspace="5" vspace="5" border="0" alt="параметр вывода количества элементов в разделе инфоблока (для компонента 2х колоночного списка)" width="272" height="39" /></p> <p>Тогда полный код шаблона будет выглядеть следующим образом:</p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?if(!defined(&quot;B_PROLOG_INCLUDED&quot;) || B_PROLOG_INCLUDED!==true)die(); <br /> $d = ceil(count($arResult[&quot;SECTIONS&quot;])/2); <br /> $i = 0; <br /> ?&gt; <br /> <br /> &lt;?if (!empty($arParams[&quot;2_COL_TITLE&quot;])):?&gt;&lt;h4 class=&quot;indent-1&quot;&gt;&lt;?=$arParams['2_COL_TITLE']?&gt;:&lt;/h4&gt;&lt;?endif?&gt; <br /> &lt;?if (!empty($arParams[&quot;2_COL_INTRO_TEXT&quot;])):?&gt;&lt;p class=&quot;lead&quot;&gt;&lt;?=$arParams['2_COL_INTRO_TEXT']?&gt;&lt;/p&gt;&lt;?endif?&gt; <br /> &lt;div class=&quot;lists&quot;&gt; <br /> &lt;div class=&quot;span4 left-0&quot;&gt; <br /> &lt;ul class=&quot;list&quot;&gt;&lt;?foreach($arResult[&quot;SECTIONS&quot;] as $arSection):?&gt; <br /> &lt;? <br /> $this-&gt;AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], CIBlock::GetArrayByID($arSection[&quot;IBLOCK_ID&quot;], &quot;ELEMENT_EDIT&quot;)); <br /> $this-&gt;AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], CIBlock::GetArrayByID($arSection[&quot;IBLOCK_ID&quot;], &quot;ELEMENT_DELETE&quot;), array(&quot;CONFIRM&quot; =&gt; GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM'))); <br /> ?&gt; <br /> <br /> &lt;?if( $i &gt; 0 &amp;&amp; $i%$d == 0):?&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class=&quot;span4&quot;&gt;&lt;ul class=&quot;list&quot;&gt;&lt;?endif;?&gt; <br /> &lt;li id=&quot;&lt;?=$this-&gt;GetEditAreaId($arSection['ID']);?&gt;&quot;&gt;&lt;a href=&quot;&lt;?=$arSection[&quot;SECTION_PAGE_URL&quot;]?&gt;&quot;&gt;&lt;?echo $arSection[&quot;NAME&quot;]?&gt;&lt;?if($arParams[&quot;COUNT_ELEMENTS&quot;]):?&gt;&amp;nbsp;(&lt;?=$arSection[&quot;ELEMENT_CNT&quot;]?&gt;)&lt;?endif;?&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;?$i++;?&gt; <br /> &lt;?endforeach;?&gt;&lt;/ul&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt; <br /> &lt;?if (!empty($arParams[&quot;2_COL_MORE_LINK&quot;]) &amp;&amp; !empty($arParams[&quot;2_COL_MORE_NAME&quot;])):?&gt;&lt;a href=&quot;&lt;?=$arParams['2_COL_MORE_LINK']?&gt;&quot; class=&quot;link&quot;&gt;&lt;?=$arParams['2_COL_MORE_NAME']?&gt;&lt;/a&gt;&lt;?endif?&gt; <br /> </code></div> <p> И останется только вызвать компонент на главной странице: </p> <div style="border: 1px solid; padding: 10px;"><code class="php">&lt;?$APPLICATION-&gt;IncludeComponent(&quot;bitrix:catalog.section.list&quot;, &quot;2_columns&quot;, array( <br /> &quot;IBLOCK_TYPE&quot; =&gt; &quot;-&quot;, <br /> &quot;IBLOCK_ID&quot; =&gt; &quot;3&quot;, <br /> &quot;SECTION_ID&quot; =&gt; $_REQUEST[&quot;SECTION_ID&quot;], <br /> &quot;SECTION_CODE&quot; =&gt; &quot;&quot;, <br /> &quot;COUNT_ELEMENTS&quot; =&gt; &quot;Y&quot;, <br /> &quot;TOP_DEPTH&quot; =&gt; &quot;3&quot;, <br /> &quot;SECTION_FIELDS&quot; =&gt; array( <br /> 0 =&gt; &quot;&quot;, <br /> 1 =&gt; &quot;&quot;, <br /> ), <br /> &quot;SECTION_USER_FIELDS&quot; =&gt; array( <br /> 0 =&gt; &quot;&quot;, <br /> 1 =&gt; &quot;&quot;, <br /> ), <br /> &quot;SECTION_URL&quot; =&gt; &quot;&quot;, <br /> &quot;CACHE_TYPE&quot; =&gt; &quot;A&quot;, <br /> &quot;CACHE_TIME&quot; =&gt; &quot;36000000&quot;, <br /> &quot;CACHE_GROUPS&quot; =&gt; &quot;Y&quot;, <br /> &quot;ADD_SECTIONS_CHAIN&quot; =&gt; &quot;Y&quot;, <br /> &quot;2_COL_TITLE&quot; =&gt; &quot;Наши Возможности&quot;, <br /> &quot;2_COL_INTRO_TEXT&quot; =&gt; &quot;В данном двухколоночном списке представлены возможности данного шаблона, которые вы можете штатно использовать без дополнительных доработок. В отличие от компонента представленного выше, это компонент вывода разделов инфоблока.&quot;, <br /> &quot;2_COL_MORE_NAME&quot; =&gt; &quot;Ещё&quot;, <br /> &quot;2_COL_MORE_LINK&quot; =&gt; &quot;#&quot; <br /> ), false <br /> );?&gt; <br /> </code></div> <p> <font color="#ff0000">Обратите внимание, что этот компонент, в отличие от компонента списка новостей не умеет работать с символьным кодом инфоблока!!! Необходимо указать ID! Это важно, если вы переносите код с проекта на проект и там разная нумерация инфоблоков!</font> </p> <p> </p> <p>В демо-материалах к данному уроку вы увидите на главной странице оба этих компонента.</p> <p><i>Так же обратите внимание, что в целях демонстрации возможностей этих компонентов мы обновили набор демо-данных для инфоблока новостей (там появились новые элементы и разделы), так что если вы произвели импорт в предыдущих уроках - просто повторите процесс для инфоблока с кодом NEWS (у нас его ID=3).</i></p> <p><img src="/upload/medialibrary/766/766d286c9cda3430098beecf18ea56c8.png" title="2х колоночный список в публичной части с помощью 2 разных компонентов 1С-Битрикс (списка разделов и списка элементов Инфоблока)" hspace="5" vspace="5" border="0" alt="2х колоночный список в публичной части с помощью 2 разных компонентов 1С-Битрикс (списка разделов и списка элементов Инфоблока)" width="700" height="570" /></p> <p> </p> <p> На этом мы завершаем интеграцию компонентов главной страницы. Оставшийся контент проще разместить в виде статической вёрстки, чем разрабатывать сколько-нибудь универсальный шаблон. </p> <p>Одном из последующих уроков мы создадим шаблоны страниц, которые позволят создавать заготовки с контентом, для упрощения создания такой страницы контент-редактором.</p> <p> </p> <p>Демо-материалы и результаты урока, как всегда размещены в нашем репозитории на <noindex><a href="https://github.com/lexnekr/bitrixtemplate_stylish/tree/5e615e5300926d1a110ad9b165c404d1d9c7e56e" target="_blank" rel="nofollow" >GitHub</a></noindex>.</p> <div style="text-align: right;"><a href="http://plus.google.com/+АлексейЗадойный?rel=author" target="_blank" >Задойный А.В.</a></div>

Возврат к списку

Яндекс.Метрика