@lagudal

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

Дано: Magento2, различные сообщения на странице ( о добавление товара в корзину, к сравнению, в вишлист и тд ).
По дефолту все сообщения продолжают висеть на странице пока ее не перезагрузить.
Нашел статью, в которой как раз то что мне надо - редактируется шаблон и js файл с тем чтобы сообщения эти автоматически скрывались после заданного времени.
Все работает если выводимому сообщению предшествует перезагрузка страницы.
Однако добавление в корзину работает работает без перезагрузки страницы, таким образом все это дело срабатывает только первый раз, дальше сообщение о новом добавлении остается невидимым.
Вижу что в коде принудительно скрывается блок сообщений - $(self.selector).hide();, и если не перегрузить страницу, то данный блок так и остается display:none; понимаю, что нужно его вначале очистить, добавить вначале по событию show() - вроде вижу где, но нет, что то видимо не так делаю.
Код из статьи
шаблон
<div data-bind="scope: 'messages'">
  <div data-bind="visible: isVisible(), click: removeAll">
    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
    <div role="alert" 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>
    <!-- /ko -->
    <!-- ko if: messages().messages && messages().messages.length > 0 -->
    <div role="alert" 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>
    <!-- /ko -->
  </div>
</div>
<script type="text/x-magento-init">
  { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } }
</script>


Javascript
define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            isHidden: false,
            selector: '.page.messages .messages',
            listens: {
                isHidden: 'onHiddenChange'
            }
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

            this.cookieMessages = $.cookieStorage.get('mage-messages');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.set('mage-messages', '');

        },

        initObservable: function () {
            this._super()
                .observe('isHidden');

            return this;
        },

        isVisible: function () {
            return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
        },

        removeAll: function () {
            $(self.selector).hide();
        },

        onHiddenChange: function (isHidden) {
            var self = this;

            // Hide message block if needed
            if (isHidden) {
                setTimeout(function () {
                    $(self.selector).hide();
                }, 5000);
            }
        }
    });
});
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
@lagudal Автор вопроса
В принципе решено, вот здесь скорректированный код.
Все отлично работает, единственное, они там добавили анимацию с animate.css- справа появляется и туда же уходит.
В тех случаях, когда сообщение добавляется после перезагрузки страницы, например, добавить для сравнения, сообщение появляется справа, уходит направо, потом еще раз то же сообщение в том же порядке. Т.е. дублируется.
Попробовал заменить на другую анимацию, например, fadeOut, - такой же эффект, дублируются...
Без анимации все нормально. Хотя плавное скрытие, например, opacity анимация не повредила бы..
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы