Flash messages (всплывающие сообщения) в October CMS

После совершения какого-то действия пользователем (например отправка формы), принято уведомлять его (пользователя) о статусе — успешно отправилась форма или возникла ошибка, например.

В Октябре есть для этого специальный функционал, называется 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 %}

Комментарии (1):

  1. Got Ответить

    Gut!

    30.05.2020 в 01:27

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *