После совершения какого-то действия пользователем (например отправка формы), принято уведомлять его (пользователя) о статусе — успешно отправилась форма или возникла ошибка, например.
В Октябре есть для этого специальный функционал, называется Flash 🙂 Можешь почитать об этом в официальной документации — https://octobercms.com/docs/markup/tag-flash
Сейчас я расскажу как это работает.
Как использовать всплывающие сообщения?
Использовать всплывающие сообщения очень просто.
Во первых, нужно задать сообщение в секции с php-кодом, или в компоненте, чтобы сохранить сообщение в пользовательской сессии:
<?php
function onSave()
{
// Успешное сообщение (:
Flash::success('Настройки успешно сохранены!');
// Сообщение об ошибке
Flash::error('Ошибка при сохранении настроек');
// Предупреждение
Flash::warning('Произошла какая-то проблема');
// Информационное сообщение
Flash::info('Ей мистер, не забудь зайти в настройки');
}
Задать нужное сообщение можно например при отправке формы. Отправили форму, задали соответствующее сообщение. Или после сохранения каких-то данных.
Во вторых, вывести сообщение в шаблоне одним из способов:
// выводим все сообщения подряд
<ul>
{% flash %}
<li>{{ message }}</li>
{% endflash %}
</ul>
// выводим сообщение с определённым статусом
{% flash success %}
<div class="alert alert-success">{{ message }}</div>
{% endflash %}
// назначаем класс у div соответствующий статусу сообщения
{% flash %}
<div class="alert alert-{{ type }}">
{{ message }}
</div>
{% endflash %}
Вывод сообщений с помощью js / ajax
При способе выше, сообщения выведутся только при перезагрузке страницы. А что делать, если мы выполняем какое-то действие с помощью ajax?
Самое простое — добавить кусок кода с выводом flash-сообщений в partial, и обновлять его после выполнения Ajax-запроса.
Но есть и другие способы.
Вывод всплывающего сообщения
Просто добавляем вот такой код (например внизу страницы layout):
{% flash %}
<script>
// выполнится только если документ полностью загружен
document.addEventListener("DOMContentLoaded", function () {
$.oc.flashMsg({text: '{{ message }}', 'class': 'flash-message success fade in', 'interval': 10})
}, false);
</script>
{% endflash %}
Теперь наше сообщение будет не в html-коде, а всплывёт вверху страницы в стиле October CMS.
Вывод всплывающего сообщения из js
Если у нас свой js-код, и мы хотим показать сообщение в нужный нам момент, то можем вывести его средствами Октября:
$.oc.flashMsg({text: 'сообщение', 'class': 'flash-message success fade in', 'interval': 10});
Но чтобы данные способы работали, обязательно нужно добавить в код вывод стилей и дополнительного js — {% framework extras %}
Один комментарий на «“Flash messages (всплывающие сообщения) в October CMS”»
Gut!