Эффективная интеграция и кастомизация функционала в Битрикс24 часто требует работы на уровне API. Сегодня мы подробно рассмотрим «Типы нод». Вы узнаете экспертные методики работы с типы нод и научитесь избегать типичных ошибок начинающих разработчиков.

Типы нод

Тут может не хватать некоторых данных — дополним в ближайшее время

• нужны правки под стандарт написания

Как вы можете узнать из файла манифеста, существует несколько типов нод – контейнеров, в которых расположен тот или иной контент. Давайте рассмотрим какие они есть на данный момент. В примерах показано как регистрировать в манифесте в ключе nodes, и как это выглядит в верстке.

text

Обычный текстовый контент с минимум инлайнового html.

'.landing-block-node-card-title' => array(
    'name' => 'Описание',
    'type' => 'text',
),

<h2 class="landing-block-node-card-title">Company24 video</h2>

img

Изображение. Допускается как отдельным тегом (<img>), так и фоновое (как правило для тега <div>). Для данного типа необходимо также указывать рекомендуемый размер. Для чего это сделано? Картинки могут быть разные по своему предназначению. Аватарка может быть очень маленькой, а фон напротив — большим. Вместе с тем, если в аватарку контент-редакторы будут загружать огромные картинки, они очень быстро исчерпают свободное место портала, а страница будет виснуть в браузере. Поэтому авторам блока необходимо самим заботиться о декларировании данных нод. Если размер не указан, система будет приводить такие картинки к единому небольшому размеру.

'.landing-block-node-card-bgimg' => array(
    'name' => 'Фоновая картинка',
    'type' => 'img',
    // изображение будет приведено к данному размеру
    'dimensions' => array('width' => 1920, 'height' => 1080),
    // система уменьшит изображение, только если оно превысит размер
    'dimensions' => array('maxWidth' => 1920, 'maxHeight' => 1080),
    // система будет увеличивать изображение, пока ширина
    // или высота не будет совпадать с указанными
    'dimensions' => array('minWidth' => 1920, 'minHeight' => 1080),
),

<div class="landing-block-node-card-bgimg"></div>

link

Ссылка, несет в себе текст ссылки, значение ссылки, тип ссылки (ссылка, телефон, …), а также тип открытия (в текущем окне, новом, …).

'.landing-block-node-card-button' => array(
    'name' => 'Кнопка',
    'type' => 'link',
),

<a href="/"
    class="landing-block-node-card-button text-uppercase btn u-btn-outline-white btn-md rounded-0">
    Read more
</a>

Если ссылка не является текстовой (например, несет в себе картинку, или что-либо еще), то следует добавить параметр skipContent, чтобы при сохранении он не изменялся.

'.landing-block-node-card-button' => array(
    'name' => 'Кнопка',
    'type' => 'link',
    'skipContent' => true
),

icon

Визуально похоже на изображение, так как конечный пользователь оперирует вариантами иконок, за тем лишь исключением, что не может загружать свои в данные ноды. Технически это класс элемента, который отрисовывает ту или иную иконку через стандартные иконочные шрифты.

'.landing-block-node-list-item-icon' => array(
    'name' => 'Иконка',
    'type' => 'icon',
),

<i class="landing-block-node-list-item-icon fa fa-inst"></i> //класс fa-inst отвечает за вывод иконки Инстаграмм

embed

Мультимедиа. Например, фоновое видео. При данном типе меняются только два атрибута – src и source.

'.landing-block-node-card-videobg' => array(
    'name' => 'Фоновое видео',
    'type' => 'embed',
),

<iframe
    class="landing-block-node-card-videobg bg-video__video"
    width="100%"
    src="//www.youtube.com/embed/q4d8g9Dn3ww?autoplay=1&controls=0&loop=1&mute=1&rel=0"
    data-source="https://www.youtube.com/watch?v=q4d8g9Dn3ww"
    frameborder="0"
    allowfullscreen="">
</iframe>

map

Позволяет работать с селектором как с гео-картой. В данный момент поддерживаются только карты Google. В режиме редактирования позволяет легко управлять балунами.

'.landing-block-node-map' => array(
    'name' => 'Местоположение нашего офиса',
    'type' => 'map',
),

<div class="landing-block-node-map mx-auto w-100 g-min-height-430 h-100"></div>