Magento 2: Hide success and error messages after certain time [duplicate]

Question

How to hide all success and error messages after several time magento2?

Answer 1

Follow the below steps to Automatically hide messages in Magento 2 after certain time

Overwriting the message block

Copy the file from vendor/magento/module-theme/view/frontend/templates/messages.phtml to app/design/frontend/vendor/theme/Magento_Theme/templates/messages.phtml with below content

<div data-bind="scope: 'messages'">
  <div data-bind="visible: isVisible(), click: removeAll">
    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
    <!-- ko if: messages().messages && messages().messages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
  </div>
</div>
<script type="text/x-magento-init">
  { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } }
</script>

Overwriting of the JS component

Copy the file from vendor/magento/module-theme/view/frontend/web/js/view/messages.js to app/design/frontend/vendor/theme/Magento_Theme/web/js/view/messages.js with below content

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

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            isHidden: false,
            selector: '.page.messages .messages',
            listens: {
                isHidden: 'onHiddenChange'
            }
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

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

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.set('mage-messages', '');

        },

        initObservable: function () {
            this._super()
                .observe('isHidden');

            return this;
        },

        isVisible: function () {
            return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
        },

        removeAll: function () {
            $(self.selector).hide();
        },

        onHiddenChange: function (isHidden) {
            var self = this;

            // Hide message block if needed
            if (isHidden) {
                setTimeout(function () {
                    $(self.selector).hide();
                }, 5000);
            }
        }
    });
});

Reference: https://www.interactiv4.com/blog-es-en/automatically-hide-messages-in-magento-2/?lang=en

Hope it helps!!!

Answer 2

Eu resolvi dessa maneira

criar um arquivo requires js dentro de frontend

/app/code/{vendor}/{module}/view/frontend/requirejs-config.js

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

Agora criando o Mixin js para adicinar as funções e tempo

/app/code/{Vendor}/{Module}/view/frontend/web/js/view/messages-mixin.js

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

    return function (target) {
        return target.extend({
            /**
             * Extends Component object by storage observable messages.
             */
            initialize: function () {
                this._super();

                function hideMessage(){
                    require(['jquery', 'jquery/jquery-storageapi'], function($) {
                        $.cookieStorage.set('mage-messages', '');
                    });
                }
                
                setTimeout(hideMessage,5000);
                jQuery('.messages').delay(5000).fadeOut('slow');

            }
        });
    }
});

Isso vai remover as mensagens apos 5 segundos.