Magento 2.1 – How to Improve Checkout Error Messages

checkoutmagento-2.1

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?

Best Answer

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

Related Solutions

Magento 2.1 – Load Listing Component for Custom Model on Product Edit Page

Why is it that always when I post a question on Stack Exchange, I find out the answer myself a couple of moments later? Is it some sort of digital rubber ducking? Anyway...

My mistake was in product_attachment_listing.xml. I stated:

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="provider" xsi:type="string">product_attachment_listing.product_attachment_listing_data_source</item>
        </item>
        <item name="deps" xsi:type="string">product_attachment_listing.product_attachment_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">product_attachment_columns</item>
</argument>

But this needed to be:

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">product_attachment_listing.product_attachment_listing_data_source</item>
        <item name="deps" xsi:type="string">product_attachment_listing.product_attachment_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">product_attachment_columns</item>
</argument>

I guess I made the mistake because I followed the official documentation (http://devdocs.magento.com/guides/v2.1/ui-components/ui-listing-grid.html) :-/

Hope this saves somebody some days smashing their head on their keyboard.

Magento – Magento 2.1 :- Update Display Error Message in Checkout Cart Page

You can write a block file in your module for this.

And Create a file in app/code/vendor/module/view/frontend/file.phtml

In this file you can get the customer session and quote data. So that you can perform any calculation based on that.

To call this block in checkout and cart page you have to define both xml file for that in the same module ie.

checkout_index_index.xml

checkout_cart_index.xml

In these xml you can call your block file with the help of refrence.

Best Answer

Related Solutions

Magento 2.1 – Load Listing Component for Custom Model on Product Edit Page

Magento – Magento 2.1 :- Update Display Error Message in Checkout Cart Page

Related Topic