Блоги

Блоги сайта

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



  • Сообщения форума

    • 1. Не совсем понял, получается, у ie есть свои какие то функции которые поддерживаются только в IE ? 
      Например это: filter: progid:DXImageTransform.Microsoft.gradient();  
      2. А где можно подробнее почитать про такие функции ?
      3. Получается такие скрытые функции и у других браузерах есть ?
    • я там сто раз смотрела. у меня нет целого хэдэра. есть просто папка с хэдэром, в которой написано, что идет переадресация на хэдэр синг и хэдэр мэйн. и там нет ничего похожего на контакты. вообще не понимаю, как такое возможно.  
    • Доброго времени суток. Начальство заказало на аутсорсинге дизайн landing page. Вот получили от них .psd файлы и некое подобие тз. Страница разделена на несколько блоков. Макет страницы очень схож с этим: https://blackrockdigital.github.io/startbootstrap-creative/ (пример) Однако при клике на верхнее меню, они хотят такую анимацию перехода между блоками: https://tympanus.net/Development/AnimatedFrameSlideshow/index2.html# (слайдер) Но, это только при клике, при скролле все должно быть как на обычном сайте. И в мобильной версии тоже как на примере без слайдера. Проблема в том что контента в блоках много, и никак на одной странице не уместится (а слайдер постраничный). Плюс этот слайдер работает по принципу, слайд1, слайд2 и так далее. То есть даже если прикрутить смену слайдов при скролле, остается проблема с контентом внутри этого слайда. Как вариант можно слайдам задать overflow-y: scroll, но в таком случае надо отследить конец скролла чтобы переключить следующий слайд.  Короче суть в том что по нашему мнению это глупая задача, а аутсорсинг ссылается на то что это легко реализовать а мы ограниченны своими знаниями. Вот и хотелось бы узнать советы бывалых верстальщиков дабы как-то решить данный конфликт.