Перейти к содержимому
BXWiki

Кнопки правки на витрине - режим правки, иконки области, меню элемента

Даём редактору править контент прямо со страницы сайта: режим правки, иконки тулбара компонента и меню элемента с формой в окне.

Что нужно знать заранее

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

Механизм состоит из двух разных вещей с похожим видом. Иконки тулбара относятся ко всему блоку компонента, а меню элемента - к конкретной строке списка или карточке товара на странице.

Меню элемента собирается из трёх согласованных вызовов. Идентификатор области в разметке, привязка иконок в эпилоге компонента и сами пункты меню должны использовать одну и ту же строку.

Шаги

  1. Проверить, что редактор видит режим правки и имеет права на изменение данных.
  2. Добавить иконки тулбара в файле самого компонента, а не в его шаблоне.
  3. Пометить область правки идентификатором в разметке шаблона компонента.
  4. Привязать иконки к этой области в эпилоге компонента одним вызовом.
  5. Описать пункты правки и удаления с окном формы и подтверждением.

Решение

Добавляем иконки тулбара компонента:

// component.php своего компонента, метод самого компонента
if ($APPLICATION->GetShowIncludeAreas()) {
    $this->AddIncludeAreaIcons([[
        'ID' => 'vendor_promo_edit',
        'TITLE' => 'Настроить блок акций',
        'URL' => '/bitrix/admin/vendor_promo.php',   // либо вызов javascript:
        'ICON' => 'menu-edit',
    ]]);
}

Проверка режима правки обязательна: без неё иконки пытаются рисоваться и в обычном просмотре страницы. Метод принадлежит компоненту, поэтому вызывают его в файле компонента, а не в шаблоне.

Помечаем область правки в разметке шаблона:

<div id="<?= $this->GetEditAreaID('promo_' . $item['ID']) ?>">
    <?= $item['NAME'] ?>          <!-- содержимое карточки, доступной для правки -->
</div>
<!-- у каждой карточки страницы своя область со своим идентификатором -->

Идентификатор области связывает разметку с будущим меню. Строку составляют из понятного имени и идентификатора элемента, чтобы у каждой карточки на странице получилась собственная область правки.

Привязываем меню к области в эпилоге компонента:

// component_epilog.php - привязка выполняется именно здесь
$APPLICATION->SetEditArea($areaId, $icons);
// идентификатор области обязан совпасть со строкой из разметки шаблона

Эпилог выполняется и при отдаче страницы из кэша, а сам шаблон - нет. Поэтому привязку делают в нём: иначе меню появляется только на первой сборке страницы и пропадает на всех следующих.

Описываем пункты правки и удаления:

$this->AddEditAction($areaId, $editUrl, 'Изменить акцию',
    ['WINDOW' => ['width' => 780, 'height' => 500], 'ICON' => 'bx-context-toolbar-edit-icon']);
$this->AddDeleteAction($areaId, $deleteUrl, 'Удалить акцию',
    ['CONFIRM' => 'Удалить акцию со страницы?']);   // диалог подтверждения

Форма правки открывается окном заданного размера поверх страницы. Подтверждение удаления ставят всегда: случайное нажатие на витрине стоит дороже, чем лишний вопрос редактору.

Берём название кнопки из системной фразы:

$name = \CIBlock::GetArrayByID($iblockId, 'ELEMENT_EDIT');   // название из настроек инфоблока
$this->AddEditAction($areaId, $editUrl, $name);
// так подпись совпадает с той, что редактор видит в административном разделе
// для разделов инфоблока подпись берут той же выборкой, но по другому ключу

Типичные проблемы

Меню у элемента не появляется совсем.

Идентификатор области в разметке и в привязке различается хотя бы одним символом. Все три вызова обязаны использовать одну и ту же строку идентификатора.

Иконки видны посетителю в обычном просмотре.

Добавление иконок не обёрнуто проверкой режима правки страницы. Проверку ставят вокруг вызова, а не внутри шаблона компонента.

Меню пропадает после первого показа страницы.

Привязка сделана в шаблоне, который не выполняется при отдаче из кэша. Привязку переносят в эпилог компонента, работающий на каждом запросе.

Форма правки открывается страницей вместо окна.

В описании пункта не задан размер окна для всплывающей формы. Размер указывают явно, иначе редактор уходит со страницы и теряет её место.

Подписи кнопок не совпадают с админкой.

Названия написаны в коде вручную, а не взяты из настроек инфоблока. Системная фраза возвращает ту же подпись, что видит редактор в разделе контента.

Частые вопросы

Почему кнопок правки не видно администратору?

Режим правки выключен на административной панели или у страницы нет областей правки. Сначала проверяют переключатель режима, потом код компонента.

Чем иконки тулбара отличаются от меню элемента?

Тулбар относится ко всему блоку компонента, меню - к конкретной карточке или строке. На одной странице обычно используют оба механизма сразу.

Работают ли эти кнопки в чужом компоненте?

Да, штатные компоненты каталога и новостей объявляют такие области сами. Свой шаблон должен вывести идентификатор области, иначе меню не к чему привязать.

Можно ли открыть свою форму, а не штатную?

Да, адрес формы задают произвольный, включая свою страницу административной части. Размер окна указывают там же, в описании пункта меню.

Видит ли эти кнопки менеджер без прав администратора?

Он видит их при праве на изменение данных и доступе в режим правки. Права проверяет платформа, а не ваш код компонента.

Смежное

Первоисточник