How to hide messages after certain time

Question

I want to hide success / error messages after 5 seconds once I have added items to the cart.

I have extended messages.js with the following code to hide the message after 5 seconds

setTimeout(function() {
    $(".messages").hide('blind', {}, 500);
}, 3000); 

When I add item to the cart for the first time the message gets hidden after 5 seconds but when I add another item to the cart the message is not showing up.

Answer 1

1. Create app/code/SR/MagentoStackExchange/view/frontend/requirejs-config.js

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

2. Create app/code/SR/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.

Note: I have tested in 2.3 version.

Answer 2

You can use css.

.message.success {
    animation: css 0s 3s forwards;
}

@keyframes css {
    to {
        visibility: hidden;
        height: 0;
    }
}

Answer 3

path: vendor/magento/module-checkout/view/frontend/templates/messages/addCartSuccessMessage.phtml

in your theme

app/design/frontend/Namespace/Theme/Magento_Checkout/templates/messages/addCartSuccessMessage.phtml

 <script type="text/javascript">

     require(['jquery'], function($){
    $(".message.success").fadeOut(3000); 

    //$(".message.success").delay(3000).slideUp(300);
    });
     </script>

Answer 4

Tested this in Magento 2.4.4.

Copy this file to your theme: vendor/magento/module-theme/view/frontend/templates/messages.phtml

into this folder of your theme: Magento_Theme/templates/messages.phtml

Also, copy the messages.js from this path to your theme: vendor/magento/module-theme/view/frontend/web/js/view/messages.js

Into this folder of your theme: Magento_Theme/web/js/messages.js`

Now adapt the PHTML in your theme like so.

...
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
...

to:

...
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }, click: $parent.removeAll()">
...

Notice how we've added click: $parent.removeAll() to the data-bind attribute. This binds an event on the click on the message.

Now, inside messages.js, add the removeAll logic below the prepareMessageForHtml method, and don't forget about the comma (, after the function):

        removeAll: function() {
            customerData.set('messages', {});
        }

Now, if you click the message, the message should disappear. This affects all visible messages, and can be styles with jQuery (which is a dependency for this JS file).