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


В рамках 14 урока мы разберём реализацию страницы Services: 2 вида 1 колоночных списков, 2-х колоночный список с анонсами и анонс случайной статьи:

Страница Services

Как видим, количество элементов, которые мы реализуем в рамках 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 (т.е. серьёзно устарел). Рекомендуем ознакомиться с другими нашими статьями.


Обзор Вулкан 24 онлайн

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

<p> В рамках 14 урока мы разберём реализацию страницы Services: 2 вида 1 колоночных списков, 2-х колоночный список с анонсами и анонс случайной статьи: </p> <p> <img width="700" alt="Страница Services" src="/upload/medialibrary/2c6/2c65020c95069c299d1f0a1e889a4be6.png" height="449" title="Страница Services"><br> </p> <p> Как видим, количество элементов, которые мы реализуем в рамках 1 урока заметно увеличилось. Это связано с тем, что на данной странице нет принципиально сложных сервисов и мы будем пользоваться наработками предыдущих уроков. </p> <p> Так же обратим внимание на то, что нижнюю область (анонс статьи и список новых сервисов мы вынесем во включаемую область для раздела) </p> <p> <a href="javascript://" title="Ссылка: javascript://">Свернуть/Развернуть исходный код списка Логотипов</a> </p> <div style="border: 1px dashed; padding: 10px; display: none;" id="spoiler_1"> <code> &lt;div class="row"&gt;<br>       &lt;div class="span3"&gt;<br>           &lt;h4&gt;what we offer&lt;/h4&gt;<br>           &lt;ul class="list"&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Vestibulum iaculis lacinia est ster prota&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Proin dictum elementum velit&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Fusce euismod consequat ante&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor sit amet consectetuer&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Adipiscing elit sre pot sre ame&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Pellentesque sed dolor&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Aliquam congue fermentum nisl&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Mauris accumsan nulla vel diam&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Sed in lacus ut enim adipiscing aliquet&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Vestibulum iaculis lacinia est ster prota&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Proin dictum elementum velit&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Fusce euismod consequat ante&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor sit amet consectetuer&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Adipiscing elit sre pot sre ame&lt;/a&gt;&lt;/li&gt;<br>           &lt;/ul&gt;<br>       &lt;/div&gt;<br>       &lt;div class="span9"&gt;<br>           &lt;h4 class="bot-0"&gt;fashion &amp;amp; beauty services&lt;/h4&gt;<br>           &lt;ul class="list-services"&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon1.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Suspendisse sollicitudin velit sed leo&lt;/p&gt;<br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon2.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Tincidunt ac, viverra sed, nulla&lt;/p&gt;<br> <br> <br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon3.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Ut pharetra augue nec augue&lt;/p&gt;<br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon4.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Donec in velit vel ipsum auctor pulvinar&lt;/p&gt;<br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at  &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon5.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Nam elit agna,endrerit sit amet&lt;/p&gt;<br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>             &lt;li&gt;<br>             &lt;img src="img/page3-icon6.png" alt=""&gt;<br>                 &lt;div&gt;<br>                 &lt;p class="text-info"&gt;Vestibulum iaculis lacinia est&lt;/p&gt;<br>                     Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porce suscipit varius mi, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at  &lt;a href="#" class="underline"&gt;&amp;gt;&amp;gt;&lt;/a&gt;<br>                 &lt;/div&gt;<br>             &lt;/li&gt;<br>           &lt;/ul&gt;<br>       &lt;/div&gt;<br>     &lt;/div&gt;<br> <br> &lt;div class="row"&gt;<br>       &lt;div class="span8"&gt;<br>           &lt;h4&gt;Designer’s  Advices&lt;/h4&gt;<br>           &lt;div class="text-block-1"&gt;<br>               &lt;img src="img/page3-img1.jpg" alt="" class="img-radius"&gt;<br>               &lt;div&gt;<br>                   &lt;p class="lead p2"&gt;Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. &lt;/p&gt;<br>                   Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. <br>   &lt;br&gt;<br>                   &lt;a href="more.html" class="btn btn_"&gt;more info&lt;/a&gt;<br>               &lt;/div&gt;<br>           &lt;/div&gt;<br>       &lt;/div&gt;<br>       &lt;div class="span4"&gt;<br>           &lt;h4&gt;new services&lt;/h4&gt;<br>           &lt;ul class="list"&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Proin dictum elementum velit lroe portrsene&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Fusce euismod consequat ante&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor sit amet consectetuer&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Adipiscing elit sre pot sre ame&lt;/a&gt;&lt;/li&gt;<br>               &lt;li&gt;&lt;a href="#"&gt;Proin dictum elementum velit lroe portrsene&lt;/a&gt;&lt;/li&gt;<br>           &lt;/ul&gt;<br>       &lt;/div&gt;<br>     &lt;/div&gt;</code> </div> <p> Для начала создадим тестовую страницу, где мы будем вести разработку каждого из шаблонов компонентов (например, 1.php), которую необходимо будет удалить после завершения работы. </p> <p> Сразу же создадим раздел /services/ и индексную страницу в нём. </p> <p> На странице /serviсes/index/php разместим включаемую область для раздела (в качестве суфикса имени файла включаемой области будем использовать services_footer): </p> <div style="border: 1px dashed; padding: 10px;"> <code> &lt;?$APPLICATION-&gt;IncludeComponent(<br> "bitrix:main.include",<br> "",<br> Array(<br> "AREA_FILE_SHOW" =&gt; "sect",<br> "AREA_FILE_SUFFIX" =&gt; "services_footer",<br> "AREA_FILE_RECURSIVE" =&gt; "Y",<br> "EDIT_TEMPLATE" =&gt; ""<br> )<br> );?&gt; </code> </div> <p> Внутрь включаемой области мы поместим выделенную синим на макете часть страницы (она будет общей для всех страница раздела, если иное не задано в наследуемом файле включаемой области). </p> <p> <br> </p> <h2>Одноколоночный список элементов</h2> <p> Сразу обратим внимание на важную особенность данного макета - одноколоночные списки в основной и дополнительной частях страницы имеют разную ширину! </p> <p> </p> <ul> <li> <p> Сверху (основная часть) - 1/4 часть ширины страницы (div class="span3"); </p> </li> <li> <p> Снизу (дополнительная часть) - 1/3 часть ширины страницы (div class="span4"). </p> </li> </ul> <p> </p> <p> </p> <table border="1" cellpadding="1" cellspacing="1" class=""> <tbody> <tr> <td> <b><i><span style="color: #00a650;">Примечание.</span></i></b><i> Поскольку мы интегрируем Bootstrap макет, то ширина блоков задаётся количеством "колонок", которые отводятся на каждую блока. Всего страница разбивается на 12 колонок.</i> </td> </tr> </tbody> </table> <p> </p> <p> Естественно, можно задать 2 разных шаблона (а если нам понадобится одноколоночный список другой ширины, то и больше), однако эффективнее просто отрегулировать ширину блока параметром компонента. </p> <p> Так же заметим, что перед списком выводится заголовок. Поскольку наша страница будет содержать множество разных компонентов, то для удобства редактором заголовок так же следует сделать параметром (и не забыть про проверку - в случае если заголовок пустой не выводить ничего). Мы уже так делали в прошлых уроках для 2 и 4 колоночных списков (а так же выводили небольшой поясняющий текст перед списком из другого параметра, что нам не нужно в макете, но слишком трудно, поэтому мы реализуем). </p> <p> За основу мы возьмём компонент, который был сделан нами в <a href="/information/additional_workshop_on_integration_of_adaptive_Twitte_Bootstrap_site_template_in_1C-Bitrix_10_plus/">Уроке 10+</a> (<i><span style="color: #00a650;">если вы его пропустили, просто скопируйте из репозитория шаблон 1_column компонента bitrix:news.list</span></i>). </p> <p> Фактически нам потребуется внести минимальное количество изменений, поэтому мы не будем создавать копию. Однако постараемся сохранить обратную совместимость (чтобы весь функционал Урока 10+ работал в прежнем режиме): </p> <p> </p> <ul> <li> <p> Добавим параметр выбора ширины блока (в случае если параметр не установлен будем брать ширину равную 4 колонкам). </p> </li> <li> <p> Добавим параметр вывода Заголовка перед списком (если пуст не будем выводить тегов оформления), по аналогии с Уроком 10. </p> </li> <li> <p> Добавим параметр вывода текста между заголовком и списком (если пуст не будем выводить тегов оформления), по аналогии с Уроком 10. </p> </li> <li> <p> Добавим параметры ссылки (текст и URL) после списка (если пуст текст, то не будем выводить), по аналогии с Уроком 10. </p> </li> </ul> <p> </p> <p> Мы разберём только 1-й пункт (т.е. все остальные можно скопировать из 10 урока и мы покажем далее готовый шаблон). </p> <p> Итак, в параметрах компонента в шаблоне компонента (.parameters.php) заведём параметр типа "список" с 2 значениями (1/3 и 1/4 ширины страницы): </p> <div style="border: 1px dashed; padding: 10px;"> <code class="PHP"> "1_COL_WIDTH" =&gt; array(<br> "NAME" =&gt; GetMessage("1_COL_WIDTH"),<br> "TYPE" =&gt; "LIST",<br> "VALUES" =&gt; array(<br> "4" =&gt; GetMessage("1_COL_WIDTH_4"),<br> "3" =&gt; GetMessage("1_COL_WIDTH_3")<br> ),<br>       ), </code> </div> <p> В языковом файле (пример показан только для русского языка, для английского и других языков по необходимости код будет отличаться только текстом фраз): </p> <div style="border: 1px dashed; padding: 10px;"> <code class="PHP"> $MESS ['1_COL_WIDTH'] = "Ширина блока списка";<br> $MESS ['1_COL_WIDTH_3'] = "1/4 ширины страницы";<br> $MESS ['1_COL_WIDTH_4'] = "1/3 ширины страницы"; </code> </div> <p> <i>Как видите, мы реализовали в параметрах компонента только 2 значения этого параметра. Это означает, что для выбора в режиме редактирования параметров (в визуальном интерфейсе 1С-Битрикс) будут доступны только они. Однако мы используем числовые значения не зря, а значит, опытный администратор при желании сможет в явном виде задать значение параметра даже не прибегая к редактированию .prameters.php!</i> </p> <p> В шаблоне реализуем подстановку одного из значений в зависимости от параметра (и дефолтное значение в случае, если параметр не установлен). Ниже приведём только код определения класса блока (задающий его ширину и положение) по параметрам: </p> <div style="border: 1px dashed; padding: 10px;"> <code class="PHP"> &lt;?<br> $col_class = ''; <span style="color: #00a650;">//Объявляем пустую переменную</span><br> if (IntVal($arParams["1_COL_WIDTH"]) &gt; 0) <span style="color: #00a650;">//Проверяем параметр ширины (фильтруем чтобы на выход попадали только ЧИСЛОВЫЕ значения параметра).</span><br> $col_class = 'span' . IntVal($arParams["1_COL_WIDTH"]); <span style="color: #00a650;">//Если параметр не пуст, присваиваем его значение переменной</span><br> else<br> $col_class = 'span4'; <span style="color: #00a650;">//Иначе ставим значение "по-умолчанию"</span><br> <br> <br> <br> <br> if ($arParams['COL_TYPE_LEFT'] == 'Y')<br> $col_class .= ' left-0'; <span style="color: #00a650;">//Проверяем включен ли параметр "левая колонка" и добавляем соответствующий класс</span><br> ?&gt; </code> </div> <p> Тогда полный код шаблона компонента будет: </p> <div style="border: 1px dashed; padding: 10px;"> <code class="PHP"> &lt;?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();<br> ?&gt;<br> <br> <br> <br> <br> <br> <br> &lt;?<br> $col_class = ''; //Объявляем пустую переменную<br> if (IntVal($arParams["1_COL_WIDTH"]) &gt; 0) //Проверяем параметр ширины (фильтруем чтобы на выход попадали только ЧИСЛОВЫЕ значения параметра).<br> $col_class = 'span' . IntVal($arParams["1_COL_WIDTH"]); //Если параметр не пуст, присваиваем его значение переменной<br> else<br> $col_class = 'span4'; //Иначе ставим значение "по-умолчанию"<br> <br> <br> <br> <br> if ($arParams['COL_TYPE_LEFT'] == 'Y')<br> $col_class .= ' left-0'; //Проверяем включен ли параметр "левая колонка" и добавляем соответствующий класс<br> ?&gt;<br> <br> <br> &lt;div class="&lt;?=$col_class?&gt;"&gt;<br> <br> <br> &lt;?if (!empty($arParams["1_COL_TITLE"])):?&gt;&lt;h4 class="indent-1"&gt;&lt;?=$arParams['1_COL_TITLE']?&gt;:&lt;/h4&gt;&lt;?endif?&gt;<br> &lt;?if (!empty($arParams["1_COL_INTRO_TEXT"])):?&gt;&lt;p class="lead"&gt;&lt;?=$arParams['1_COL_INTRO_TEXT']?&gt;&lt;/p&gt;&lt;?endif?&gt;<br> <br> <br> &lt;ul class="list"&gt;&lt;?foreach($arResult["ITEMS"] as $arItem):?&gt;<br> &lt;?<br> $this-&gt;AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));<br> $this-&gt;AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" =&gt; GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));<br> ?&gt;<br> &lt;li id="&lt;?=$this-&gt;GetEditAreaId($arItem['ID']);?&gt;"&gt;&lt;a href="&lt;?echo $arItem["DETAIL_PAGE_URL"]?&gt;"&gt;&lt;?echo $arItem["NAME"]?&gt;&lt;/a&gt;&lt;/li&gt;<br> &lt;?endforeach;?&gt;&lt;/ul&gt;<br> &lt;?if (!empty($arParams["1_COL_MORE_LINK"]) &amp;&amp; !empty($arParams["1_COL_MORE_NAME"])):?&gt;&lt;a href="&lt;?=$arParams['1_COL_MORE_LINK']?&gt;" class="link"&gt;&lt;?=$arParams['1_COL_MORE_NAME']?&gt;&lt;/a&gt;&lt;?endif?&gt;<br> &lt;/div&gt; </code> </div> <p> Создадим инфоблок "Услуги" с символьным кодом "SERVICES". </p> <p> <br> </p> <h2></h2> <h2 style="text-align: center;"><span style="color: #ff0000;"><b>Статья не завершена.</b></span></h2> <p style="text-align: center;"> <span style="color: #ff0000;"><b>Окончание статьи не планируется, т.к. в 2015 году уже доступна Alfa версия Bootstrap 4, а данный шаблон использует Bootstrap 2 (т.е. серьёзно устарел). Рекомендуем ознакомиться с другими нашими статьями.</b></span> </p> <p> </p>

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

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