0

This question already has an answer here:

I want to hide all success messages after some interval. I have added following code in messages.js but it will not work on Add to cart success message. In short it will not working on messages which come from Ajax call.

  ...
  ....
 $.cookieStorage.set('mage-messages', '');
        setTimeout(function() {
            $(".messages").hide('blind', {}, 500)
        }, 5000);

marked as duplicate by Mohit Kumar Arora, Manashvi Birla, sv3n, Community Oct 30 '18 at 4:20

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Try the following way:

File: Vendor/Module/view/frontend/requirejs-config.js

var config = {
    "map": {
        "*": {
            "Magento_Theme/js/view/messages": "Vendor_Module/js/view/messages",
        }
    }
}

File: Vendor/Module/view/frontend/web/js/view/messages.js

define([
    'jquery',
    'uiComponent',
    'underscore',
    'Magento_Customer/js/customer-data',
    'jquery/jquery-storageapi'
], function ($, Component, _, customerData) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: []
        },

        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.cookieMessages = $.cookieStorage.get('mage-messages');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.set('mage-messages', '');
            setTimeout(function() {
                $(".messages").hide('blind', {}, 500)
            }, 5000);
        }
    });
});

Now, clear cache, deploy static content and check again.

  • I have already applied this way but add to cart success message not showing. – sagar nakrani Oct 30 '18 at 4:16
0

You can use CSS instead of script.

.success {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}

@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

Its work for me.

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