Magento 2 – Hide Success and Error Messages After Certain Time
magento2magento2.2
How to hide all success and error messages after several time magento2?
Best Answer
Follow the below steps to Automatically hide messages in Magento 2 after certain time
Overwriting the message block
Copy the file from vendor/magento/module-theme/view/frontend/templates/messages.phtml to app/design/frontend/vendor/theme/Magento_Theme/templates/messages.phtml with below content
Copy the file from vendor/magento/module-theme/view/frontend/web/js/view/messages.js to app/design/frontend/vendor/theme/Magento_Theme/web/js/view/messages.js with below content
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);
}
}
});
});
From what I can see with what your posting it doesn't seem to be an issue with the functional more the theme or 3rd party extension removing the message block or you have a js conflict which is preventing it
In my case it was a 3rd party application causing a it to reset the message cookie check in chome cookies and see if the response is being set and reset if so it's most likely a module which is causing the message to be unset
Best Answer
Follow the below steps to Automatically hide messages in Magento 2 after certain time
Copy the file from
vendor/magento/module-theme/view/frontend/templates/messages.phtml
toapp/design/frontend/vendor/theme/Magento_Theme/templates/messages.phtml
with below contentCopy the file from
vendor/magento/module-theme/view/frontend/web/js/view/messages.js
toapp/design/frontend/vendor/theme/Magento_Theme/web/js/view/messages.js
with below contentHope it helps!!!