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.

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

1

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>

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.