How can i scroll up error message after click on place order magento2

Question

If a user is a small screen device, there are many situations where they will never see an error message.
I referred to this link
Usability issues with error/notice/success messages. But do not get any answer
For example,

if they're on the "Shipping" step of the checkout process and
the error message is added, they may not see the error message get added
to the top of the page.
My suggestion would be to either smooth scroll the user up to the
error message, display the error message next to the button.

Sathya · Answer

You can change the Error message location to the bottom of the content by overriding the checkout_index_index.xml Please let me know whether working or not.

vinhphon · Answer

By default, all most payment methods will extend the default payments method component, this default payment will define the child messagesContainer component inside the payment.
ref: module-checkout/view/frontend/web/js/view/payment/default.js
I don't know what Magento versions but you are using Authorize.net, it may be out of updated version, the error message was shown on the global message component.

You can debug the Authorize.net method and fix the response message should be shown by Payment component messageContainer.

To cheat this case as you want that scroll top when clicking place order, you can override the js file module-checkout/view/frontend/web/js/view/payment/default.js
on your template.

or create a mixin for this file module-checkout/view/frontend/web/js/view/payment/default.js on your custom module.
My Magento version: 2.3.2
requirejs-config.js
var config = {
 config: {
     mixins: {
         'Magento_Checkout/js/view/payment/default': {
             'Namespace_Youcustommodule/js/view/payment/default-mixin': true
         }
     }
 }
};

Your custom mixin js/view/payment/default-mixin.js
define(function () {
 'use strict';

var mixin = {
        placeOrder: function (data, event) {
            var self = this;

if (event) {
                event.preventDefault();
            }
            
            //Scroll to top
            window.scrollTo({top: 0, behavior: 'smooth'});

if (this.validate() && additionalValidators.validate()) {
                this.isPlaceOrderActionAllowed(false);

this.getPlaceOrderDeferredObject()
                    .fail(
                        function () {
                            self.isPlaceOrderActionAllowed(true);
                        }
                    ).done(
                        function () {
                            self.afterPlaceOrder();

if (self.redirectAfterPlaceOrder) {
                                redirectOnSuccessAction.execute();
                            }
                        }
                    );

return true;
            }

return false;
        }
 };

return function (target) { 
    return target.extend(mixin);
 };
});

Note that: This is not a good solution, I prefer to fix directly on your payment method as solution 1.
Regards,

Gideon Babu · Answer

A possible quick solution could be using high-level programming languages like Javascript.

Just check if the error div has value in it using selector in jQuery/Javascript, and then add a jQuery script to scroll to top:

$(window).scrollTop(0);

You could also add smooth effect if you wish to.

How can i scroll up error message after click on place order magento2

3 Answers

Add your own answers!

Ask a Question