0

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

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

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.