Блоги

Блоги сайта

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

    Заметка может быть интересна 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) и обнови страницу.

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы