Настраиваем вывод ошибок, возникающих при отправке форм

При работе с контентом наиболее частой операцией является отправка форм добавления и редактирования страниц сайта. Возникновение ошибок – это нормальное событие, которое сопровождает эти действия. Важно не наличие ошибки, а их правильный и понятный для пользователя вывод. Для этого необходимо понимать как разметить сообщение и как его стилизовать. Этим мы сегодня и займемся.

Разметка и теги в TPL-шаблонах

Прежде всего, необходимо убедиться в том, что в текущем шаблоне (например, page.add.tpl или page.edit.tpl) присутствует директива

{FILE "{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/warnings.tpl"}

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

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

<!-- BEGIN: ERROR -->
<div class="alert alert-danger">
	<span class="fs-5 fw-bold d-block">{PHP.L.Error}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: ERROR_ROW -->
		<li>{ERROR_ROW_MSG}</li>
<!-- END: ERROR_ROW -->
	</ul>
</div>
<!-- END: ERROR -->

<!-- BEGIN: WARNING -->
<div class="alert alert-warning">
	<span class="fs-5 fw-bold d-block">{PHP.L.Warning}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: WARNING_ROW -->
		<li>{WARNING_ROW_MSG}</li>
<!-- END: WARNING_ROW -->
	</ul>
</div>
<!-- END: WARNING -->

<!-- BEGIN: DONE -->
<div class="alert alert-success">
	<span class="fs-5 fw-bold d-block">{PHP.L.Done}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: DONE_ROW -->
		<li>{DONE_ROW_MSG}</li>
<!-- END: DONE_ROW -->
	</ul>
</div>
<!-- END: DONE -->

Как видим, наш TPL-шаблон состоит из трех блоков:

• ERROR
• WARNING
• DONE

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

Внутри каждого блока находится регулярный блок. Соответственно, это:

• ERROR_ROW
• WARNING_ROW
• DONE_ROW

Они необходимы для того, чтобы иметь возможность разделить и разметить отдельные сообщения – если их несколько. Например, если вам необходимо вывести сообщения “заголовок слишком короткий” и “текст страницы не должен быть пустым”.

Как видно из примера, для разметки мы использовали немаркированный список. Обратите внимание на использование стандартных alert-классов фреймворка Bootstrap и формирование соответствующих заголовков с помощью встроенных в пакет локализации lang-строк.

Настройка вывода ошибок в формах добавления и редактирования страниц

В качестве примера рассмотрим отправку формы добавления / редактирования страницы. Алгоритм будет следующий:

• при неудачной отправке вы остаетесь в исходной локации и изучаете сообщение об ошибке,
• при успешной отправке осуществляется переход на созданную / отредактированную страницу.

Если в TPL-шаблоне page.add.tpl или page.edit.tpl (или в тонко настраиваемом, например, page.add.blog.tpl) присутствует директива

{FILE "{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/warnings.tpl"}

, а файл warnings.tpl имеет вид

<!-- BEGIN: ERROR -->
<div class="alert alert-danger">
	<span class="fs-5 fw-bold d-block">{PHP.L.Error}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: ERROR_ROW -->
		<li>{ERROR_ROW_MSG}</li>
<!-- END: ERROR_ROW -->
	</ul>
</div>
<!-- END: ERROR -->

<!-- BEGIN: WARNING -->
<div class="alert alert-warning">
	<span class="fs-5 fw-bold d-block">{PHP.L.Warning}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: WARNING_ROW -->
		<li>{WARNING_ROW_MSG}</li>
<!-- END: WARNING_ROW -->
	</ul>
</div>
<!-- END: WARNING -->

<!-- BEGIN: DONE -->
<div class="alert alert-success">
	<span class="fs-5 fw-bold d-block">{PHP.L.Done}</span>
	<ul class="list-unstyled m-0">
<!-- BEGIN: DONE_ROW -->
		<li>{DONE_ROW_MSG}</li>
<!-- END: DONE_ROW -->
	</ul>
</div>
<!-- END: DONE -->

Сообщения об ошибках будут выводиться именно так, как и предполагалось:

Однако на этом возможности Cotonti не ограничиваются. Вы также можете организовать вывод отдельных сообщений об ошибках под соответствующими полями. Для этого необходимо включить опцию “Показывать сообщения отдельно для каждого источника” в админке по пути “Конфигурация” – “Темы”:

Теперь под “проблемным” полем будет выведено сообщение об ошибке в его заполнении:

Как видим, дефолтная разметка выглядит не очень. Это легко исправить стилизацией:

ul.error                       {  }
	ul.error > li > span.error {  }

Либо можно изменить соответствующую ресурсную строку в PHP-файле темы. Используем штатные классы Bootstrap:

$R['code_msg_begin'] = '<ul class="{$class} list-unstyled mb-0 text-danger">';

Теперь наши сообщения имеют более наглядный вид:

Заключение

В нашей статье мы рассмотрели принцип формирования и вывода сообщений об ошибках. Для этого в теме сайта и админки используется однотипный файл warnings.tpl Разметка и стилизация не представляют большой сложности для разработчика сайта на базе движка Cotonti. Надеемся, что наша статья поможет вам сделать эту работу быстрее и эффективнее.

Ранее мы разбирались с возможностями анализа UTM-меток в CMS Cotonti.