Настраиваем вывод ошибок, возникающих при отправке форм
Популярные запросы: тема Omnis, плагин Pagelist, Cotonti 0.9.24.2, ЧПУ, Font Face
- 118 просмотров
- 29 июля, 2024
- Обновлено: 31 июля, 2024
- admin
- Время чтения: 4 минуты
При работе с контентом наиболее частой операцией является отправка форм добавления и редактирования страниц сайта. Возникновение ошибок – это нормальное событие, которое сопровождает эти действия. Важно не наличие ошибки, а их правильный и понятный для пользователя вывод. Для этого необходимо понимать как разметить сообщение и как его стилизовать. Этим мы сегодня и займемся.
Разметка и теги в 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.
Спасибо за полезную информацию
Новый комментарий