Attributes

List of attributes used to store data, binded to specific nodes is configured via the attrs key in the block manifest. It is done for multiple values - field default values, counters, video and map settings and many more. Generally, attribute set is supplemented by a specific script that can handle it. Additionally, attributes can participate in the block style setup, by indicating in CSS that a card with specific attribute has another colour (for example).

Attribute description

Each attribute is described by:

• name,
• code,
• type,
• items key (in case when list type is specified).

Locations

The manifest's attrs key can be located in the following locations:

1. Directly in the root, as indicated in the manifest example.

   'attrs':
   {
           '.landing-block-node-text': 
           {
               'name': 'Text settings',
               'type': 'dropdown',
               'attribute': 'data-copy'
           }
    },

2. The style key; in this case the attribute is displayed in the design settings form.

   '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'
                     ]
                  ]
               }
            },

3. In the description card. In this case, attribute is applied directly to each card separately

   'cards':
      {
         '.landing-block-node-card-button':
            {
               'name': 'Card',
               'additional': {
                  'attrs': [
                     [
                        'type': 'text',
                        'name': 'Text field',
                        'attribute': 'data-test-card-attr'
                     ]
                  ]
               }
            },

Attribute grouping

The following must be done to group a portion of attributes (example of root location; the same principle is applied to the rest of locations):

'attrs' => array(
   '' => array(
      array(
         'name' => 'Test group',
         'attrs' => array(
            array(
               "type" => "checkbox",
               // Re-define selector (if required)
               "selector" => "bitrix:catalog.section",
               "name" => "",
               "items" => array(
                  array("name" => "Product display", "value" => "1"),
                  array("name" => "Product display 2", "value" => "2"),
                  array("name" => "Product display 3", "value" => "3"),
               ),
               "attribute" => "data-checkbox"
            ),
            array(
               "type" => "checkbox",
               "name" => "",
               "items" => array(
                  array("name" => "Product display 22", "value" => "1")
               ),
               "compact" => true,
               "attribute" => "data-checkbox2"
            )
         )
      ),
      array(
         "type" => "checkbox",
         "name" => "",
         "items" => array(
            array("name" => "Product display 33", "value" => "1")
         ),
         "attribute" => "data-checkbox3"
      )
   )
)

Various selectors

To save attribute values into different selectors, just specify another selector for a specific attribute (It can be useful in avoiding unnecessary nodes for visual adjustments):

array(
   'name' => 'Text fields',
   'type' => 'text',
   'attribute' => 'data-text-field',
   'selector' => '.demo-another-selector'
)

Type of attributes

Attributes - is a conditional storage of hidden values. For example, start coordinates for a map. Naturally, it is sensible to input attributes only jointly with some JS code that can handle such attributes. Attributes must be registered in manifest in the attrs key.

Presently, the following types of attributes are supported:

• text - standard text string.
• html - multiple string text field
• images - image with standard controls - select from PC or perform library search.
• icon - icon.
• dropdown - dropdown list.
• checkbox - checkbox list. Set a single value in items if you want to display a single checkbox.
• multiselect - multiple selection list.
• link - list with standard controls.
• url - simplified variant for a link: selection of page/block or a random URL.
• slider / range-slider - slider options for value array.
• palette - palette.
• sortable-list - sorted list of values. Sorting is performed via dragging of elements by a mouse.
• position - set of arrow symbols to indicate position of an element within a block.
• date - date and time selection.

Please, see below the specific examples with those types of data. Additional variation options are also listed.

Additional

Aside specific properties of a given type (see example below), each type can have additional properties:

• hidden - attribute is registered, but not displayed for editing in the block node. This option is useful for registering blocks, when sanitizer does not allow for unregistered attributes

Example

<?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//if true, editor isn't connected during editing 
      ),
      ),
      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' => 'Allow indicating product quantity', 'value' => '1', 'checked' => true),
            array('name' => 'Allow out-of-stock product notifications', 'value' => '2', 'checked' => true),
            array('name' => 'Show discount percentage', 'value' => '3', 'checked' => true),
            array('name' => 'Show old price', 'value' => '4', 'checked' => true),
            array('name' => 'Allow product comparison', 'value' => '5', 'checked' => true)
         )
      ),
      array(
         'name' => 'Multi select field',
         'type' => 'multiselect',
         'attribute' => 'data-test-multiselect',
         'items' => array(
            array('name' => 'Allow indicating product quantity', 'value' => '1', 'selected' => true),
            array('name' => 'Allow out-of-stock product notifications', 'value' => '2', 'selected' => true),
            array('name' => 'Show discount percentage', 'value' => '3'),
            array('name' => 'Show old price'', 'value' => '4', 'items' => array(
               array('name' => 'Allow product comparison', 'value' => '41', 'selected' => true),
               array('name' => 'Allow indicating product quantity', 'value' => '42', 'selected' => true),
               array('name' => 'Allow out-of-stock product notifications', 'value' => '43', 'selected' => true),
               array('name' => 'Show discount percentage', 'value' => '44', 'selected' => true)
            )),
            array('name' => 'Allow product comparison', 'value' => '5'),
            array('name' => 'Allow indicating product quantity', 'value' => '6'),
            array('name' =>'Allow out-of-stock product notifications', '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, // Disables blocks selection 
         'disableCustomURL' => false // Disables the URL manual input
      ),
      array(
         'name' => 'Datetime',
         'type' => 'date',
         'time' => true,//allow precise time selection 
         'format' => 'ms',//'ms' (milliseconds) / 's' (seconds)
         'value' => 1621584180000
      )
   )
);