How to hide custom error message after a certain time in Magento 2?

Question

I have redirected customer to cart from checkout in a specific scenario using observer with a custom error message. Here is the observer code.

namespace Vendor\Module\Observer;
use Magento\Framework\Event\ObserverInterface;

   public function __construct(
        \Magento\Framework\Url $url,
        \Magento\Framework\Message\ManagerInterface $messageManager,
        \Magento\Framework\App\Response\Http $http,
        // other dependencies
    )
    {
        $this->url = $url;
        $this->messageManager = $messageManager;
        $this->http = $http;
    }
    public function execute(\Magento\Framework\Event\Observer $observer)
    {


                $cartUrl = $this->url->getUrl('checkout/cart');
                $mySpecificCondition = true;
                if ($mySpecificCondition) {
                    $this->messageManager->addErrorMessage('Custom error message here.');
                    $this->http->setRedirect($cartUrl);
                }
        }
    }

This error message is shown forever if I do not refresh this page. How I can program it so that this custom error message is hidden after 5 seconds?

Answer 1

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.