1

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.

4 Answers 4

7
  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
            }
        }
    }
};
  1. 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.

3
  • is this for all the messages? adding product to the basket, discount code Feb 17, 2020 at 10:21
  • @SohelRana, If you have a time can you look at this thread similar to this. magento.stackexchange.com/questions/315736/…
    – Bojjaiah
    Jun 24, 2020 at 10:59
  • Hmm can't get this to work for some reason, the js is loading as it console logs but the timeout never happens. messages.messages returns empty array 🧐
    – 00-BBB
    Nov 17, 2020 at 18:34
5

You can use css.

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

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

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>
0

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).

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.