Блоги

Блоги сайта

  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) и обнови страницу.



  • Ближайшие события

    Предстоящих событий не найдено
  • Сообщения форума

    • Компания ProHoster предлагает Вашему вниманию выделенные сервера по очень выгодным ценам, расположенные в Украине, подключенные к каналу 100Mb/s, с возможностью подключения канала до 1Gb/s. Также по желанию клиента на каждый сервер можем бесплатно установить панель VestaCP. Выделенные сервера для белых проектов.  Тарифный план MYCON03
      2x Intel E5430 Quad-Core Xeon 2.66 GHz
      Memory ......................16GB
      HDD............................2TB
      Цена:.........................41$ Тарифный план MYCON05
      2x Intel L5420 Quad-Core Xeon 2.5 GHz
      Memory ......................16GB
      HDD............................2TB
      Цена:.........................41$ Тарифный план MYCON06
      2x Intel L5335 Quad-Core Xeon 2.0 GHz
      Memory ......................20GB
      HDD............................750GB
      Цена:.........................41$ * Данные цены действуют на первый месяц аренды сервера. Последующие месяцы аренды 70$. Дополнительный IP-адрес - 2$ шт.
      Пакет IPv4 сеть /24 - 100$ в месяц.
      Стоимость подключения канала 1Gb/s составляет 100$. Выделенные сервера для серых проектов. Тарифный план MYBS01
      2x Intel L5520 Quad-Core Xeon 2.26 GHz
      Memory .............24GB
      HDD............................2TB
      Цена:.........................70$ Тарифный план MYBS02
      2x Intel L5420 Quad-Core Xeon 2.5 GHz
      Memory .............16GB
      HDD............................1x750GB + 1x2TB
      Цена:.........................70$ Тарифный план MYBS03
      2x Quad-Core Xeon E5430 2.66GHz
      Memory .............16GB
      HDD............................2TB
      Цена..........................70$ Тарифный план MYBS04
      2x Intel L5335 Quad-Core Xeon 2.0 GHz
      Memory .............20GB
      HDD............................1x750GB + 1x2TB
      Цена:.........................70$ Тарифный план MYBS05
      2x Intel L5420 Quad-Core Xeon 2.5 GHz
      Memory .............16GB
      HDD............................750GB
      Цена:.........................70$ Тарифный план MYBS06
      2x Intel L5335 Quad-Core Xeon 2.0 GHz
      Memory .............20GB
      HDD............................750GB
      Цена:.........................70$ Тарифный план MYBS07
      2x Intel L5420 Quad-Core Xeon 2.5 GHz
      Memory .............24GB
      HDD............................4x146GB SAS 15k
      Цена:.........................70$

      *Аукционная цена действует на первый месяц аренды сервера. В последующие месяца цены лежат в пределах от 90$ до 100$ Дополнительный IP-адрес - 2$ шт.
      Стоимость подключения канала 1Gb/s составляет 50$.
        Более подробную информацию о выделенных серверах и дополнительных услугах читайте на нашем сайте. Контакты:
      Сайт: http://prohoster.info/
      ICQ: 4143254
      Также пишите в Online Chat
    • ничего не понятно
    • а почему бы и нет?
      https://jsfiddle.net/7ap3atk1/1/