5

It seems for many people, the error message on checkout is out of their screen view and the message rapidly disappeas, so most of the time the error occurs the customer has no idea and just continues to hit the place order button over and over. This is for AVS errors and when cards are declined or any other error.

Is there a way to change the error to show in a modal pop-up that would show on the users screen and require the user to close the error message? Or make the error message more visible and persistent?

2 Answers 2

11
+50

You can stop the message from hiding with the following.

Copy from:

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

Paste to:

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

Remove the visible binding. Change:

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

to:

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

The visible binding starts the timer that hides the message after five seconds. Remove that, but keep the "click" binding so customers can hide the message by clicking on it.

Clear your cache and re-deploy the static content:

bin/magento setup:upgrade
bin/magento setup:static-content:deploy
2
  • Yes. it's persistent and that really helps a lot! Going to see if I can figure out a way to put inside a closable modal so customers have to acknowledge - but thank you so much!!
    – dawhoo
    Oct 16, 2017 at 18:25
  • it is help me...
    – Amit Bera
    Feb 22, 2018 at 9:45
5

we can do it from js mixin

in you custom module view/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);                
//            }
            }
        });
    };

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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