Кастомизация блоков
Список блоков в библиотеке формируется из списка шаблонов компонента ranx:block.landing.
Шаблон может содержать в себе следующие папки и файлы:
- lang - папка для файлов локализации
- demo - папка для файлов демо-контента, чтобы при вставке блок не был пустым
- .block.php - файл с конфигурацией шаблона. Описание здесь.
- preview.png - изображение превью для библиотеки блоков
- и др. стандартные файлы шаблона компонента: template.php, style.css, script.js, result_modifier.php
Как кастомизировать существующий блок
Чтобы кастомизировать существующий блок, достаточно скопировать его шаблон и добавить постфикс _custom (или любой другой). Например, для блока с кодом 2_1, кастомный шаблон может называться 2_1_custom.
Примечание: если вы кастомизировали какой-то существующий блок, то используйте название вида 2_1_{постфикс}. А если вы создаете свой собственный блок, то используйте префикс, например ranx_. К примеру, вы создали блок с калькулятором, тогда его код может быть ranx_calc.
Один и тот же блок можно кастомизировать несколько раз, создавая к примеру шаблоны с названиями 1_1_custom2, 1_1_custom3 и т.д.
После того, как шаблон был создан, нужно сбросить кеш. И новый блок появится автоматически в разделе Custom в библиотеке блоков.
Для кастомного блока можно поменять Название, изображение и другие настройки. Все они хранятся в файле .block.php в папке шаблона (описание этого файла можно найти здесь).
Важный момент! Для каждого блока автоматически формируется CSS-класс в зависимости от его кода. Например, для блока 2_1 это .block2-1. А для его кастомного варианта 2_1_custom класс будет block2-1-custom. Поэтому важно пройтись автозаменой по файлу style.css и поменять классы.
Как создать свой кастомный блок
К примеру, вы решили создать свой собственный блок для вывода иконок.
Для этого, вам нужно создать шаблон компонента ranx:block.landing с названием {префикс}_{название}, например ranx_icons.
После этого добавляем туда файл .block.php с таким содержимым:
<?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); use Bitrix\Main\Localization\Loc; return [ 'NAME' => Loc::getMessage('RX_BLOCK_RANX_ICONS_NAME'), 'COLS' => [2, 3, 4], 'COLS_DEFAULT' => 3, 'INDENT_TOP_DEFAULT' => 100, 'INDENT_BOT_DEFAULT' => 100, 'ELEMENTS_FIELDS' => [ 'NAME', 'PREVIEW_TEXT', 'PROPERTY_IMG', ], ];
Здесь мы описали конфигурацию нашего будущего блока. Его название и поля, которые будет содержать карточка блока (заголовок, описание и изображение). Также мы задали стандартные отступы сверху и снизу и варианты колонок со значением по умолчанию.
Далее, создаем файл template.php, в котором будет находиться верстка блока:
<?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); $this->setFrameMode(true); ?> <?= $arResult['BLOCK_START'] ?> <div class="maxwidth-theme"> <?= $arResult['BLOCK_TITLE'] ?> <div class="row icons"> <?foreach($arResult['ITEMS'] as $arItem):?> <div class="col-lg-<?= $arResult['COLS'] ? 12 / $arResult['COLS'] : '3' ?> col-md-6 icon"> <div class="image"> <img class="icon-img" src="<?=$arItem['PROPS']['IMG_PATH']?>"> </div> <div class="icon-description"> <div class="icon-name block-el-title"><?=$arItem['NAME']?></div> <p class="icon-text"><?=$arItem['~PREVIEW_TEXT']?></p> </div> </div> <?endforeach;?> </div> <?=$arResult['BTN']?> </div> <?= $arResult['BLOCK_END'] ?>
$arResult['BLOCK_START'] и $arResult['BLOCK_END'] являются обязательными. Все остальное опционально и зависит от блока.
$arResult['BLOCK_TITLE'] содержит заголовок блока.
$arResult['ITEMS'] содержит карточки блока, свойства карточки можно получить в ключе PROPS.
$arResult['BTN'] выводит кнопки для блока.
Теперь, надо задать стили для нашего блока. Для этого создаем файл style.css, в котором описываем классы подобным образом:
.blockranx-icons .icons
Смысл в том, чтобы использовать класс вида .block{код блока разделенный дефисами} для описания стилей. Чтобы стили не пересекались со стилями других блоков.