0

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

2 Answers 2

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.

-1

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.

2
  • I have already applied this way but add to cart success message not showing. Commented Oct 30, 2018 at 4:16
  • I have also tried this code but not working
    – Deep Shah
    Commented Apr 21, 2022 at 10:49

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