Подтверждение действий

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

Кстати, при установленном плагине Trashcan в CMS Cotonti Siena удаление элементов производится в корзину, поэтому безвозвратными такие действия не являются.

В таких случаях можно использовать различные решения, вплоть до использования капчи. Однако важно сохранять баланс между безопасностью и юзабилити. И здесь все решает квалификация программиста и возможности движка. К счастью, Котонти позволяет решать такие задачи без больших затрат.

Формируем ссылку и кнопку

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

$delete_element_url = cot_url('plug', ['e' => 'plugin_name', 'm' => 'delete', 'id' => $element_id]);

Ссылка готова, теперь сформируем кнопку:

$delete_element_button = cot_rc('delete_button', ['url' => $delete_element_url];

Чтобы все заработало, создадим соответствующий ресурс:

$R['delete_button'] = '<a href="{$url}" class="btn btn-danger">' . $L['Delete'] . '</a>';

Теперь простым кликом мы можем удалить контент. Но это действие необходимо обезопасить. 

Реализуем подтверждение действия

Для решения данной задачи используем функцию cot_confirm_url() из API Cotonti Siena. Она позволяет открывать модальные окна с подтверждением выполнения критического действия. Именно то, что нам необходимо.

Наш URL придется модифицировать:

$delete_element_url = cot_url('plug', ['e' => 'plugin_name', 'm' => 'delete', 'id' => $element_id]);
$delete_element_confirm_url = cot_confirm_url($delete_element_url);

Теперь сформируем кнопку, и здесь есть одно небольшое условие: для срабатывания анкор должен иметь класс .confirmLink. Реализовать это несложно – необходимо передать его в виде параметра в ресурсную строку:

$delete_element_confirm_button = cot_rc('delete_button', ['url' => $delete_element_confirm_url, 'class' => 'confirmLink'];

Сам R-строка будет выглядеть так:

$R['delete_button'] = '<a href="{$url}" class="btn btn-danger {$class}">' . $L['Delete'] . '</a>';

Нам осталось разместить кнопку на странице сайта.

Добавляем кнопку в шаблон

Разместить кнопку в TPL-шаблоне можно просто с помощью созданной нами переменной $delete_element_confirm_button:

<div>
  {PHP.delete_element_confirm_button}
</div>

Если вам этого достаточно, смело переходите к следующему разделу. Для остальных напомним, как создается TPL-тег:

$t->assign([
  'DELETE_BUTTON' => $delete_element_confirm_button,
]);

Размещается он в шаблоне более наглядно:

<div>
  {DELETE_BUTTON}
</div>

А нам осталось несколько завершающих штрихов.

Кастомизируем модальное окно

Теперь при клике по нашей кнопке пользователю будет предложено подтвердить свое действие с помощью модального окна. Оно будет сформировано через шаблон message.tpl. Выглядит он так:

<!-- BEGIN: MAIN -->
<!-- IF !{AJAX_MODE} -->
<main id="message" class="mb-4">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12 col-md-6 offset-md-3 col-xxl-4 offset-xxl-4">
				<div class="title mt-4 py-2">
					<h1 class="text-center">{MESSAGE_TITLE}</h1>
				</div>
				<!-- ENDIF -->
				<div class="alert alert-warning" role="alert">
					<p class="text-center">{MESSAGE_BODY}</p>
					<div class="d-flex justify-content-center gap-3">
						<!-- BEGIN: MESSAGE_CONFIRM -->
						<a id="confirmYes" href="{MESSAGE_CONFIRM_YES}" class="confirmButton btn btn-success btn-sm fw-bold text-uppercase w-25">
							{PHP.L.Yes}
						</a>
						<a id="confirmNo" href="{MESSAGE_CONFIRM_NO}" class="confirmButton btn btn-danger btn-sm bold fw-bold text-uppercase w-25">
							{PHP.L.No}
						</a>
						<!-- END: MESSAGE_CONFIRM -->
					</div>
				</div>
				<!-- IF !{AJAX_MODE} -->
			</div>
		</div>
	</div>
</main>
<!-- ENDIF -->
<!-- END: MAIN -->

Это мой вариант, уже кастомизированный классами Bootstrap и доступный в Pastebin. При желании окно можно стилизовать и с помощью собственного внешнего CSS-файла.

Главное, о чем надо помнить: для модального окна будут отсечены блоки разметки между условиями:

<!-- IF !{AJAX_MODE} -->

<!-- ENDIF -->

Данные блоки работают для вывода сообщений в обычном режиме и не нужны при AJAX-вызовах.

Итак, кликаем по ссылке, и получаем вот такое подтверждение:

Все неплохо, но можно и лучше если сможем кастомизировать сообщение. Для этого вернемся к функции cot_confirm_url(). Кроме URL’а, она принимает еще два аргумента – код расширения и код lang-строки из него. Теперь в lang-файле нашего расширения plugin_name.ru.lang.php можно создать собственное уведомление:

$L['plugin_name_confirm_warning'] = 'Вы действительно хотите удалить этот элемент?';

Останется только указать его:

$delete_element_confirm_url = cot_confirm_url($delete_element_url, 'plugin_name', 'plugin_name_confirm_warning');

Код плагина подскажет системе, где необходимо искать lang-строку. Теперь мы получим более осмысленное предупреждение:

Наша задача решена полностью.

Вместо заключения

С помощью кейса мы разобрали довольно любопытный функционал CMS Cotonti Siena, позволяющий выводить настраиваемые подтверждения для действий, связанных с кликами. Настраивается не только внешний вид модального окна, но и само содержание уведомления. При этом, отсекая ненужную при AJAX-вызове разметку шаблона message.tpl, мы полностью сохраняем его универсальность.

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