Расширенное описание карточек

Выберите инструмент для разработки с AI-агентом:

  • используйте Битрикс24 Вайбкод, чтобы создать приложение для Битрикс24 по описанию задачи без знания языков программирования. Агент напишет код и разместит приложение на сервере без ручной настройки хостинга
  • используйте MCP-сервер, чтобы разрабатывать интеграцию через REST API в своем проекте. Агент будет обращаться к официальной REST-документации

Расширенное описание карточек — это расширенная настройка ключа cards в манифесте, которая позволяет использовать несколько вариантов карточек в одном списке.

Базовые принципы карточек и нод описаны в манифесте блока.

Расширенное описание карточек используют, когда в одном наборе карточек требуются:

  • разные наборы полей у карточек одного списка, например, только телефон или телефон + e-mail + ссылка
  • разные варианты верстки для одинаковых объектов
  • карточки из заранее заданных пресетов

Пример расширенного описания карточки

'cards' => [
            '.landing-block-card' => [
                'name' => 'Контакты',
                'label' => [
                    '.landing-block-node-element-icon',
                    '.landing-block-node-element-title',
                ],
                'presets' => [
                    'telegram' => [
                        'name' => 'Telegram',
                        'html' => '<html-код-пресета>',
                        'values' => [
                            '.landing-block-node-element-title' => 'Telegram',
                            '.landing-block-node-element-text' => 'Any text ...',
                            '.landing-block-node-element-icon' => [
                                'type' => 'icon',
                                'classList' => [
                                    'landing-block-node-element-icon',
                                    'fa',
                                    'fa-telegram',
                                ],
                            ],
                        ],
                        'disallow' => [
                            '.landing-block-node-element-icon',
                        ],
                    ],
                ],
            ],
        ],

Поля расширенного описания карточек

  • name — название группы карточек в интерфейсе
  • label — правило формирования заголовка карточки. Можно указать один селектор ноды или массив селекторов
  • presets — набор пресетов карточек. Если presets не пустой, новые карточки добавляются из пресетов. Значение — массив, где ключи — это идентификаторы пресетов

Поля пресета

  • name — название пресета в списке
  • html — разметка карточки для пресета. Редактируются только те ноды, которые определены в nodes и не отключены через disallow
  • values — начальные значения нод и полей карточки. Ключом выступает селектор ноды из nodes, значением — данные в формате соответствующего типа ноды
  • disallow — список селекторов нод, которые нельзя редактировать

Разметка пресета

Для связи карточки с пресетом в разметке укажите атрибут data-card-preset с кодом пресета. Значение data-card-preset должно совпадать с ключом пресета в presets.

В разных пресетах внутренняя структура карточки может отличаться. Например, в одном варианте внутри <li> используется ссылка, а в другом вместо ссылки может быть изображение. При этом внешний контейнер карточки рекомендуется сохранять единообразным.

Пример:

<li class="landing-block-node-list-item col g-min-width-65 list-inline-item g-mr-0"
            data-card-preset="telegram">
            <a class="landing-block-node-list-item-link d-block g-py-15 g-px-30 g-bg-telegram--hover g-bg-telegram g-color-white text-center" href="#">
                <i class="landing-block-node-list-item-icon fa fa-telegram"></i>
            </a>
        </li>
Предыдущая
Типы нод
Следующая
Локализация блока