1

How to hide success messages after 5 seconds in Magento 2? I want to hide this message shown in the below picture after 5 seconds. it is coming from message.phtml file.

enter image description here

1
  1. Create app/code/Rakesh/MagentoStackExchange/view/frontend/requirejs-config.js
var config = {
    config: {
        mixins: {
            'Magento_Theme/js/view/messages': {
                'Rakesh_MagentoStackExchange/js/view/messages-mixin': true
            }
        }
    }
};

  1. Create app/code/Rakesh/MagentoStackExchange/view/frontend/web/js/view/messages-mixin.js

define([
    'Magento_Customer/js/customer-data'
], function (customerData) {
    'use strict';

    return function (target) {
        return target.extend({
            /**
             * Extends Component object by storage observable messages.
             */
            initialize: function () {
                this._super();
                var self = this;
                self.messages.subscribe(function(messages) {
                    if (messages.messages) {
                        if (messages.messages.length > 0) {
                            setTimeout(function() {
                                customerData.set('messages', {});
                            }, 3000);
                        }
                    }
                });
            }
        });
    }
});

Clear browser js cache.

  • yes its working but i just want to run setTimout function only on mobile screen. screen with less than 800. how can i modify it? – Junaid Ashfaq Oct 10 at 5:54
  • @JunaidAshfaq may be you need to add this condition if(screen.width < 800) { setTimeout(function() { customerData.set('messages', {}); }, 5000); //disappear the message in 5 seconds } – Rakesh Donga Oct 10 at 5:59
  • yes its working i have added (screen.width < 800) in condition thanks – Junaid Ashfaq Oct 10 at 6:42
1

You can do it by overriding the Magento's messages-mixin.js in your custom module.

view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Theme/js/view/messages': {
                'Vendor_Module/js/view/messages-mixin': true
            }
        }
    }
};

view/frontend/web/js/view/messages-mixin.js

define([
    'Magento_Customer/js/customer-data'
], function (customerData) {
    'use strict';    
    return function (target) {
        return target.extend({
            initialize: function () {
                this._super();
                var self = this;
                self.messages.subscribe(function(messages) {
                    if (messages.messages) {
                        if (messages.messages.length > 0) {
                            if (window.screen.width < 800) {
                                setTimeout(function() {
                                    customerData.set('messages', {});
                                }, 5000); //disappear the message in 5 seconds
                            }
                        }
                    }
                });
            }
        });
    }
});

Run the below commands after the changes:

php bin/magento c:f

Hope it helps!!!

  • yes its working but i just want to run setTimout function only on mobile screen. screen with less than 800. how can i modify it? – Junaid Ashfaq Oct 10 at 5:55
  • Updated my answer, please check. – Sumit Oct 10 at 5:57
  • 1
    yes its working i have added (screen.width < 800) in condition thanks – Junaid Ashfaq Oct 10 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.