Melhorando mensagem de Erro no Checkout – Magento 2

Parece que para muitas pessoas, a mensagem de erro no checkout está fora da tela e a mensagem desaparece rapidamente, então na maioria das vezes o erro ocorre, o cliente não tem ideia e continua pressionando o botão de fazer pedido repetidamente.

Isso é para erros na forma de pagamento e quando os cartões são recusados ou qualquer outro erro. Existe uma maneira de alterar o erro para mostrar em um pop-up modal que seria exibido na tela do usuário e exigiria que o usuário fechasse a mensagem de erro? Ou tornar a mensagem de erro mais visível e persistente?

Interrompa a ocultação automática da mensagem após X segundos

Primeiro copie o arquivo da vendor:

vendor/magento/module-ui/view/frontend/web/template/messages.html

Cole no diretório do seu Tema, para que você possa sobrescrever da forma correta o arquivo:

app/design/frontend/YourPackage/YourTheme/Magento_Ui/web/template/messages.html

Remova o “visible binding” Mudando:

<div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll">

Para:

<div data-role="checkout-messages" class="messages" data-bind="click: removeAll">

A ligação visível inicia o temporizador que oculta a mensagem após cinco segundos. Remova isso, mas mantenha a ligação “clique” para que os clientes possam ocultar a mensagem clicando nela. Limpe seu cache e reimplemente o conteúdo estático:

Alterando pelo Javascript

podemos fazer isso a partir do js mixin em sua visualização de módulo personalizado/frontend/requirejs-config.js

 

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

messages-mixin.js

define([
    'jquery'
], function($) {
    'use strict';
    return function(targetModule) {
        return targetModule.extend({
            onHiddenChange: function (isHidden) {
            var self = this;

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

});

Porém essa segunda opção irá afetar todas as mensagens temporárias de erro ou sucesso que são exibidas no frontend do Magento 2