Дано: 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);
}
}
});
});
