CMS (Content Management System)

Sign in to follow this  
  • entries
    2
  • comments
    10
  • views
    11,655

Contributors to this blog

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

klierik

3,278 views

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

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



1 Comment


Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Who's Online   0 Members, 0 Anonymous, 26 Guests (See full list)

    There are no registered users currently online



  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors