Кастомизация блоков


Список блоков в библиотеке формируется из списка шаблонов компонента 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{код блока разделенный дефисами} для описания стилей. Чтобы стили не пересекались со стилями других блоков.