• записи
    2
  • комментариев
    9
  • просмотра
    483

Авторы блога:

Magento2 — прячем автоматически системные уведомления через заданное время

klierik

210 просмотров

Привет, друзья.

Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.

Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?

Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:

magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml

с содержимым:

Скрытый текст

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
    <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

 

Давай скопируем его в кастомную тему по адресу:

magento/app/design/frontend/HTMLForum/default/Magento_Theme/templates/messages.phtml

где "HTMLForum/default" — это "Vendor/theme"

В рамках задачи нам требуется спрятать системное уведомление через заданное кол-во времени. Для этого можно воспользоваться колбеком knockoutjs.com — afterRender().

Мне кажется правильнее было бы выполнить Messages.extend({}) в новом компоненте, но мои попытке не увенчались успехом на момент написания статьи. Я внесу обновления в текущую заметку когда буду знать более корректный путь для реализации поставленной задачи.

В M2 существуют 2 варианта вывода уведомлений:

  • В результате перезагрузки страницы (на пример, добавление продукта на странице продукта)
  • В результате ajax-запроса (на пример, добавление продукта на странице каталога)

В вышеуказанном шаблоне содержатся оба варианта. Пример ф-ии которая будет вызвана после рендеринга уведомления:

afterRender: function(e){
    setTimeout(function () {
        jQuery(e).fadeOut()
    }, 5000);
}

где "5000" — это время ожидания в мс.

Её мы используем для обоих вариантов следующим образом:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        },
        afterRender: function(e){
            setTimeout(function () {
                jQuery(e).fadeOut()
            }, 5000);
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
    <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        },
        afterRender: function(e){
            setTimeout(function () {
                jQuery(e).fadeOut()
            }, 5000);
        }
        ">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

Вот, собственно, и всё.

Почисти кеш, запусти деплой (или пересоздай симлинки + билд стилей темы через Grunt) и обнови страницу.




0 комментариев


Нет комментариев для отображения

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас