Атрибуты
Описание
С помощью ключа attrs в манифесте блока указывается список атрибутов для хранения данных, привязанных к определенным нодам. Применяется это повсеместно – от дефолтных значений полей, счетчиков до настройки карты, видео, и много чего еще. Как правило, в пару к набору атрибутов идет определенный скрипт, который умеет со всем этим работать. Либо атрибуты могут участвовать в стилизации блоков, путем указания в CSS, что карточка с определенным атрибутом имеет другой цвет (например).
Каждый атрибут описывается:
- названием,
- кодом,
- типом,
- ключом items (в случае списочного типа).
Места размещения
Ключ attrs в манифесте может размещаться в следующих местах:
- Непосредственно в корне, как указано в примере манифеста.
'attrs': { '.landing-block-node-text': { 'name': 'Настройка текст', 'type': 'dropdown', 'attribute': 'data-copy' } }, - В ключе style, в этом случае атрибут выводится в форме настроек дизайна.
'style': { '.landing-block-node-card-button': { 'name': 'Button', 'type': ['border-color', 'button', 'animation'], 'additional': { 'attrs': [ [ 'type': 'text', 'name': 'Text field', 'attribute': 'data-test-card-attr' ] ] } }, } - В описании карточки. В таком случае атрибут применяется непосредственно к каждой карточке отдельно
'cards': { '.landing-block-node-card-button': { 'name': 'Card', 'additional': { 'attrs': [ [ 'type': 'text', 'name': 'Text field', 'attribute': 'data-test-card-attr' ] ] } }, }
Группировка атрибутов
Если требуется часть атрибутов группировать, то делается это следующим образом:
// корневое размещение
'attrs' => array(
'' => array(
array(
'name' => 'Test group',
'attrs' => array(
array(
"type" => "checkbox",
// Переопределение селектора (если нужно)
"selector" => "bitrix:catalog.section",
"name" => "",
"items" => array(
array("name" => "Отображение товаров", "value" => "1"),
array("name" => "Отображение товаров 2", "value" => "2"),
array("name" => "Отображение товаров 3", "value" => "3"),
),
"attribute" => "data-checkbox"
),
array(
"type" => "checkbox",
"name" => "",
"items" => array(
array("name" => "Отображение товаров 22", "value" => "1")
),
"compact" => true,
"attribute" => "data-checkbox2"
)
)
),
array(
"type" => "checkbox",
"name" => "",
"items" => array(
array("name" => "Отображение товаров 33", "value" => "1")
),
"attribute" => "data-checkbox3"
)
)
)
// блок style (обратите внимание, в случае style поддерживается только либо без групп, либо группировка в рамках одного селектора)
'additional' => array(
array(
'name' => 'Test group',
'attrs' => array(
array(
"type" => "text",
"name" => "Test",
"attribute" => "data-text"
),
array(
"type" => "text",
"name" => "Test 2",
"attribute" => "data-text2"
)
)
)
)
Отличающиеся селекторы
Если вы хотите, чтобы значения атрибутов сохранялись в иной селектор, то просто укажите у конкретного атрибута другой селектор. (Это может быть полезно, чтобы не добавлять лишние ноды для визуального изменения):
array( 'name' => 'Текстовое поле', 'type' => 'text', 'attribute' => 'data-text-field', 'selector' => '.demo-another-selector' )
Типы атрибутов
Атрибуты - это условное хранение hidden-значений. Например, стартовые координаты карты. Естественно, атрибуты имеет смысл вводить только вкупе с неким JS-кодом, который эти атрибуты умеет использовать. Атрибуты необходимо зарегистрировать в манифесте в ключе attrs.
На данный момент поддерживаются следующие типы атрибутов:
- text - обычная текстовая строка.
- html - многострочное текстовое поле
- images - картинка со стандартными контролами - выбор с компьютера или поиск в библиотеках.
- icon - иконка.
- dropdown - выпадающий список.
- checkbox - группа чекбококсов. Если вы хотите вывести одиночный чекбокс, просто укажите одно значение в items.
- multiselect - множественный список.
- link - ссылка со стандартными контролами.
- url - упрощенный вариант ссылки: выбор страницы/блока или произвольного URL.
- slider / range-slider - варианты слайдеров массива значений.
- palette - палитра.
- sortable-list - сортируемый список значений. Сортировка происходит посредством перетаскивания элементов мышкой.
- position - набор стрелок для указания положения элемента в блоке.
- date - выбор даты и времени.
Конкретные примеры с данными типами смотрите ниже. Там же вы сможете найти дополнительные опции вариативности.
Дополнительно
Помимо специфических свойств того или иного типа (смотрите пример ниже) каждый тип может обладать дополнительными свойствами:
- hidden - атрибут регистрируется, но не выводится на редактирование в карточке блока, удобно для регистрации блоков, когда санитайзер не пропускает не зарегистрированные атрибуты.
Пример
<?php
$attrs = array(
".landing-node" => array(
array(
"type" => "text",
"name" => "Test attr field",
"placeholder" => "Type your text",
"value" => "default_value",
"attribute" => "data-test-text"
"textOnly" => false//если в true, то при редактировании не будет подключаться редактор
),
),
array(
"type" => "image",
"name" => "Test attr image field",
"value" => array(
"src" => "http://bitrix24.io/bitrix/images/landing/app-store-badge.svg",
"alt" => "test alt"
),
"attribute" => "data-test-image"
),
array(
"type" => "icon",
"name" => "Test attr icon field",
"value" => array(
"classList" => array("fa", "fa-address-card")
),
"attribute" => "data-test-icon"
),
array(
"type" => "dropdown",
"name" => "Test attr dropdown field",
"items" => array(
array("name" => "#1", "value" => 1),
array("name" => "#2", "value" => 2),
array("name" => "#3", "value" => 3),
array("name" => "#4", "value" => 4)
),
"value" => 3,
"attribute" => "data-test-dropdown"
),
array(
'name' => 'Checkbox field',
'type' => 'checkbox',
'attribute' => 'data-test-checkbox',
'items' => array(
array('name' => 'Разрешить указание количества товара', 'value' => '1', 'checked' => true),
array('name' => 'Разрешить оповещения для отсутствующих товаров', 'value' => '2', 'checked' => true),
array('name' => 'Показывать процент скидки', 'value' => '3', 'checked' => true),
array('name' => 'Показыать старую цену', 'value' => '4', 'checked' => true),
array('name' => 'Разрешить сравнение товаров', 'value' => '5', 'checked' => true)
)
),
array(
'name' => 'Multi select field',
'type' => 'multiselect',
'attribute' => 'data-test-multiselect',
'items' => array(
array('name' => 'Разрешить указание количества товара', 'value' => '1', 'selected' => true),
array('name' => 'Разрешить оповещения для отсутствующих товаров', 'value' => '2', 'selected' => true),
array('name' => 'Показывать процент скидки', 'value' => '3'),
array('name' => 'Показыать старую цену', 'value' => '4', 'items' => array(
array('name' => 'Разрешить сравнение товаров', 'value' => '41', 'selected' => true),
array('name' => 'Разрешить указание количества товара', 'value' => '42', 'selected' => true),
array('name' => 'Разрешить оповещения для отсутствующих товаров', 'value' => '43', 'selected' => true),
array('name' => 'Показывать процент скидки', 'value' => '44', 'selected' => true)
)),
array('name' => 'Разрешить сравнение товаров', 'value' => '5'),
array('name' => 'Разрешить указание количества товара', 'value' => '6'),
array('name' => 'Разрешить оповещения для отсутствующих товаров', 'value' => '7', 'selected' => true)
)
),
array(
"type" => "link",
"name" => "Test attr link field",
"value" => array(
"text" => "Link anchor",
"href" => "/test",
"target" => "_popup"
),
"attribute" => "data-test-link"
),
array(
"type" => "slider",
"name" => "Test attr slider field",
"items" => array(
array("name" => "1", "value" => 1),
array("name" => "2", "value" => 2),
array("name" => "3", "value" => 3),
array("name" => "4", "value" => 4),
array("name" => "5", "value" => 5)
),
"value" => 2,
"attribute" => "data-test-slider"
),
array(
"type" => "range-slider",
"name" => "Test attr range slider field",
"items" => array(
array("name" => "1", "value" => 1),
array("name" => "2", "value" => 2),
array("name" => "3", "value" => 3),
array("name" => "4", "value" => 4),
array("name" => "5", "value" => 5)
),
"value" => array(
"from" => 3,
"to" => 5
),
"attribute" => "data-test-range-slider"
),
array(
"type" => "palette",
"name" => "Test attr palette field",
"items" => array(
array('name' => 'g-bg-lightblue', 'value' => 'g-bg-lightblue'),
array('name' => 'g-bg-lightblue-opacity-0_1', 'value' => 'g-bg-lightblue-opacity-0_1'),
array('name' => 'g-bg-lightblue-v1', 'value' => 'g-bg-lightblue-v1'),
array('name' => 'g-bg-lightblue-v1-opacity-0_1', 'value' => 'g-bg-lightblue-v1-opacity-0_1'),
array('name' => 'g-bg-darkblue', 'value' => 'g-bg-darkblue'),
array('name' => 'g-bg-darkblue-opacity-0_1', 'value' => 'g-bg-darkblue-opacity-0_1'),
array('name' => 'g-bg-indigo', 'value' => 'g-bg-indigo'),
array('name' => 'g-bg-indigo-opacity-0_1', 'value' => 'g-bg-indigo-opacity-0_1'),
array('name' => 'g-bg-red', 'value' => 'g-bg-red'),
array('name' => 'g-bg-red-opacity-0_1', 'value' => 'g-bg-red-opacity-0_1'),
array('name' => 'g-bg-red-opacity-0_2', 'value' => 'g-bg-red-opacity-0_2'),
array('name' => 'g-bg-red-opacity-0_5', 'value' => 'g-bg-red-opacity-0_5'),
array('name' => 'g-bg-red-opacity-0_8', 'value' => 'g-bg-red-opacity-0_8'),
array('name' => 'g-bg-lightred', 'value' => 'g-bg-lightred'),
array('name' => 'g-bg-lightred-opacity-0_1', 'value' => 'g-bg-lightred-opacity-0_1'),
array('name' => 'g-bg-darkred', 'value' => 'g-bg-darkred'),
array('name' => 'g-bg-darkred-opacity-0_1', 'value' => 'g-bg-darkred-opacity-0_1'),
array('name' => 'g-bg-purple', 'value' => 'g-bg-purple')
),
"property" => "background-color",
"attribute" => "data-test-palette",
// Set if tou need get color by className from css
// "stylePath" => "/path/to/stylesheet.css",
// Set if you need get color from styles for pseudo-element (::before, ::after)
// "pseudo-element" => "::after",
// Set if you need get color from styles for pseudo-class (:hover, :active, ...)
// "pseudo-class" => ":hover"
),
array(
"type" => "sortable-list",
"name" => "Product blocks",
"items" => array(
array("name" => 'head', "value" => "1"),
array("name" => "props", "value" => "2"),
array("name" => "tp", "value" => "3"),
array("name" => "qant", "value" => "4"),
array("name" => "quant2", "value" => "5"),
array("name" => "action", "value" => "6"),
array("name" => "comp", "value" => "7")
),
"value" => array("1", "2", "3", "4", "5", "6", "7"),
"attribute" => "data-catalog-prop-sort"
),
array(
"type" => "position",
"name" => "position",
"items" => array(
"top-left" => array("content" => "", "value" => "1"),
"top-center" => array("content" => "", "value" => "2"),
"top-right" => array("content" => "", "value" => "3"),
"middle-left" => array("content" => "", "value" => "4"),
"middle-center" => array("content" => "", "value" => "5"),
"middle-right" => array("content" => "", "value" => "6"),
"bottom-left" => array("content" => "", "value" => "7"),
"bottom-right" => array("content" => "", "value" => "8")
),
"value" => "top-right",
"attribute" => "data-catalog-prop-position"
),
array(
'name' => 'URL field',
'type' => 'url',
'value' => '#landing166',
'attribute' => 'data-test-url',
'disableBlocks' => true, // Отключает выбор блоков
'disableCustomURL' => false // Отключает возможность ввести урл руками
),
array(
'name' => 'Datetime',
'type' => 'date',
'time' => true,//давать возможность выбора точного времени
'format' => 'ms',//'ms' (миллисекунды) / 's' (секунды)
'value' => 1621584180000
)
);
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.