Эрмитаж для компонента
В 1С-Битрикс управление сайтом есть замечательная возможность, которую очень ценят контент-менеджеры. Если вы используете свой собственный компонент, вам могут понадобится кнопки управления элементом в публичной части. Запрограммированный правильным образом сайт имеет возможность, при включенном режиме редактирования наведя курсор например на товар, выполнить действия:
- Изменить
- Удалить
- Добавить
Если планируете поменять информацию, жмем изменить. При этом всплывет окошко со всеми теми же полями и вкладками, что и при обычном редактировании из админки, но нам уже не нужно искать соответствующий элемент инфоблока и идти по структуре каталога.
Программирование кнопок
Задается id
для DOM элемента в html через метод $this->GetEditAreaId($arElement["ID"])
в который параметром передается id
инфоблока который в данном случае берем из массива $arElement["ID"]
. DOM элемент является контейнером при отображении информации об элементе инфоблока на странице, например если это div
:
template.php// проверка на администратора для вывода экшенов
if ($USER->IsAdmin() && $APPLICATION->GetShowIncludeAreas()) {
echo '<div class="swiper-slide" id="' . $this->GetEditAreaId($arElement["ID"]) . '">';
} else {
echo '<div class="swiper-slide">';
}
Для того чтобы добавить кнопки, нужно создать файл component_epilog.php
и затем в этом файле нужно добавить экшены к вашим кнопкам.
component_epilog.php// Метод показа кнопок, $this->GetEditAreaId получаем ID блока указанного в HTML для которого выводим кнопки
$APPLICATION->SetEditArea($this->GetEditAreaId($arResult["ID"]), array());
// Ссылки для экшенов и название кнопки
$arButtons = CIBlock::GetPanelButtons(
// Идентификатор инфоблока, которому принадлежит элемент
$arResult["IBLOCK_ID"],
// Идентификатор текущего элемента информационного блока
$arResult["ID"],
// Идентификатор раздела инфоблока (при наличии)
0,
// Массив, содержащий локализацию названий
array("SECTION_BUTTONS" => false, "SESSID" => false)
);
// Экшен изменения элемента
$this->AddEditAction(
// Идентификатор текущего элемента информационного блока
$arResult["ID"],
// Ссылка из $arButtons на изменение эллемента
$arButtons["edit"]["edit_element"]["ACTION_URL"],
// Название кнопки
$arButtons["edit"]["edit_element"]["TEXT"]
);
// Экшен добавления элемента
$this->AddEditAction(
// Идентификатор текущего элемента информационного блока
$arResult["ID"],
// Ссылка из $arButtons на добавление эллемента
$arButtons["edit"]["add_element"]["ACTION_URL"],
// Название кнопки
$arButtons["edit"]["add_element"]["TEXT"]
);
// Экшен удаления элемента
$this->AddDeleteAction(
// Идентификатор текущего элемента информационного блока
$arResult["ID"],
// Ссылка из $arButtons на удаление эллемента
$arButtons["edit"]["delete_element"]["ACTION_URL"],
// Название кнопки
$arButtons["edit"]["delete_element"]["TEXT"],
array("CONFIRM" => "Удалить?")
);
Бывают случаи, когда элементы инфоблока образуются в цикле. Реальный пример, это обычная карусель выводимая из информационного блока. В этом случае единственный вариант получить у каждого элемента пропущеного через цикл кнопки управления, добавить код непосредственно в файл template.php
, а вводные данные получить из массива $arResult
:
template.php<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?>
<section>
<div class="container product_slider">
<div class="swiper mySwiper4">
<div class="swiper-wrapper">
<? foreach ($arResult as $arElement) : ?>
<?
// ссылки для экшенов и название кнопки
$arButtons = CIBlock::GetPanelButtons(
// идентификатор инфоблока, которому принадлежит элемент
$arElement["IBLOCK_ID"],
// идентификатор текущего элемента информационного блока
$arElement["ID"],
// идентификатор раздела инфоблока (при наличии)
0,
// массив, содержащий локализацию названий
array("SECTION_BUTTONS" => false, "SESSID" => false)
);
// экшен изменения элемента
$this->AddEditAction(
// идентификатор текущего элемента информационного блока
$arElement["ID"],
// ссылка из $arButtons на изменение эллемента
$arButtons["edit"]["edit_element"]["ACTION_URL"],
// название кнопки
$arButtons["edit"]["edit_element"]["TEXT"]
);
// экшен добавления элемента
$this->AddEditAction(
// идентификатор текущего элемента информационного блока
$arElement["ID"],
// ссылка из $arButtons на изменение эллемента
$arButtons["edit"]["add_element"]["ACTION_URL"],
// название кнопки
$arButtons["edit"]["add_element"]["TEXT"]
);
// экшен удаления элемента
$this->AddDeleteAction(
// идентификатор текущего элемента информационного блока
$arElement["ID"],
// ссылка из $arButtons на изменение эллемента
$arButtons["edit"]["delete_element"]["ACTION_URL"],
// название кнопки
$arButtons["edit"]["delete_element"]["TEXT"],
array("CONFIRM" => "Удалить?")
); ?>
<?
// проверка на администратора для вывода экшенов
if ($USER->IsAdmin() && $APPLICATION->GetShowIncludeAreas()) {
echo '<div class="swiper-slide" id="' . $this->GetEditAreaId($arElement["ID"]) . '">';
} else {
echo '<div class="swiper-slide">';
}
?>
<div class="product">
<div class="item">
<div class="row">
<div class="col-8 title"><?= $arElement["PROPERTY_ID_2_ZAGOLOVOK_VALUE"] ?></div>
<div class="col-4 image"><img src="<?= "/local/templates/hmarketing/img/svg/icons/" . preg_replace('#[a-z]{3,4}$#', 'svg', $arElement["PREVIEW_PICTURE"]["ORIGINAL_NAME"], 1) ?>" alt="<?= $arElement["PREVIEW_PICTURE"]["DESCRIPTION"] ?>" width="40" height="40"></div>
<div class="col-12 tekst"><?= $arElement["PROPERTY_ID_2_TEXT_VALUE"] ?></div>
<div class="col-12 button">Узнать больше<span class="icon-arrow-right"></div>
</div>
</div>
<div class="hover swiper-lazy" data-background="<?= $arElement["PROPERTY_ID_2_KARTINKA_VALUE"]["SRC"] ?>">
<div class="row">
<div class="col-12 title"><?= $arElement["PROPERTY_ID_2_ZAGOLOVOKHOVER_VALUE"] ?></div>
<div class="col-12 tekst"><?= $arElement["PROPERTY_ID_2_TEXTHOVER_VALUE"] ?></div>
<div class="col-12 button"><a href="<?= $arElement["PROPERTY_ID_2_HREF_VALUE"] ?>">Жми подробнее... <span class="icon-arrow-right"></span></a></div>
</div>
</div>
</div>
<? echo '</div>'; ?>
<? endforeach ?>
</div>
<div class="slider-nav">
<div class="swiper-prev"></div>
<div class="swiper-indicators"></div>
<div class="swiper-next"></div>
</div>
</div>
</section>