3

I have a problem on my updated Magento 2.4 store. The error messages (like insufficient stock amount) disappear after a short time. Instead, I want them to be visible until the customer clicks on them. This should be standard behaviour in my opinion for error messages!

I checked the issue here, but the fix here did not work / the file is now different on Magento 2.4.

The overrides for vendor/magento/module-ui/view/frontend/web/template/messages.html did not work (source). I have changed the file from

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">

Also, I did the suggested override for vendor/magento/module-ui/view/frontend/web/js/view/messages.js: I changed the values for the timeout

return Component.extend({
    defaults: {
        template: 'Magento_Ui/messages',
        selector: '[data-role=checkout-messages]',
        isHidden: false,
        hideTimeout: 30000,
        hideSpeed: 10000,
        listens: {
            isHidden: 'onHiddenChange'
        }
    },

I did the required bin/magento setup:upgrade and double checked every edit. Still, whenever there is an alert message, it disappears after a very short period of time. The annoying thing is, that it is not about styling or visibility, the whole message just disappears from the code.

For every success message, the structure is like this:

<div data-bind="scope: 'messages'"> 
<!-- ko if: cookieMessages &&
cookieMessages.length > 0 --> 
<div role="alert" data-bind="foreach: {
data: cookieMessages, as: 'message' }" class="messages"> <div
data-bind="attr: { class: 'message-' + message.type + ' ' +
message.type + ' message', 'data-ui-id': 'message-' + message.type }"
class="message-success success message" data-ui-id="message-success">
<div data-bind="html: $parent.prepareMessageForHtml(message.text)">
[MESSAGE  TEXT].
</div> 
</div> 
</div> 
<!-- /ko --><!-- ko if: messages().messages && messages().messages.length > 0 -->
<!-- /ko    -->
</div>

However when there is an error, there is just the wrapper class, so the whole HTML disappears:

<div data-bind="scope: 'messages'">
<!-- ko if: cookieMessages && cookieMessages.length > 0 -->
<!-- /ko -->
<!-- ko if: messages().messages && messages().messages.length > 0 -->
<!-- /ko -->
</div>

For me, this is rather unusual and not elegantly solved. How do I prevent the message from being vanished?

3
  • did you end up solving this? Commented Nov 21, 2020 at 20:46
  • No, it still persists.
    – TheFrakes
    Commented Nov 23, 2020 at 8:23
  • I have the exact same problem as OP. In version 2.3.5 the fix in message.js worked. Since the upgrade on 2.4.5 this fix is no longer in effect. In the minicart all messages disappers within 1 second. There is a solution linked here which includes changes to file Magento_Customer/js/customer-data.js This works, but its not exact enaugh: With this solution i must stop reloads of minicart in general, because its not possible to just stop reloading the messages. Its just not working, nothing of the solutions. I checked any file of other modules, nothing to fix. Any other ideas how to prevent messa Commented Jan 8 at 19:32

2 Answers 2

0

I resolved this issue by adding the following file: app/design/frontend/COMPANY/THEME_NAME/Magento_Ui/web/js/view/messages.js

and commenting out the onHiddenChange function at the very end.

           /**
             * @param {Boolean} isHidden
             */

            /*
            onHiddenChange: function (isHidden) {
                var self = this;
    
                // Hide message block if needed
                if (isHidden) {
                    setTimeout(function () {
                        $(self.selector).hide('blind', {}, 500);
                    }, 5000);
                }
            }
           */

...and refresh your caches.

5
  • Thanks! I modified the file and did upgrade & content deployment & refreshed all cashes. Did not resolve the issue though.
    – TheFrakes
    Commented Dec 3, 2020 at 11:35
  • This solution is not working
    – Ekta Puri
    Commented Apr 5, 2023 at 2:45
  • I'm still using this solution in production, it does work. Commented Apr 5, 2023 at 19:09
  • what is the magento version you using? I am having issues only for product added and removed messages on PLP/PDP
    – Ekta Puri
    Commented Apr 5, 2023 at 23:54
  • posting here if someone else having same issue as mine, I have posted my solution on this thread, stackoverflow.com/questions/75484564/…
    – Ekta Puri
    Commented Apr 6, 2023 at 1:33
0

I did this recently in M2.4.6 p2

Just comment out the listens part in vendor/magento/module-ui/view/frontend/web/js/view/messages.js (copy it to your theme folder)

defaults: {
     template: 'Magento_Ui/messages',
     selector: '[data-role=checkout-messages]',
     isHidden: false,
     hideTimeout: 5000,
     hideSpeed: 500
     /*listens: {
          isHidden: 'onHiddenChange'
     }*/
},

Also I'd suggest keeping the original messages.html template - that is keep the visible: isVisible() data-bind. Otherwise the html of the messages template will always be visible and could affect the layout a little (cause of margins or similar).

After the change, you need to redeploy static files and clear page cache.

If it's still not working after these changes, then I would suggest viewing the messages.js file through the browser debugger to check if the changes are actually visible.

If the changes to messsages.js are truely visible, then most probably the error messages that are disappearing are loaded differently (possibly some theme or extension modification) and you should maybe do a text search for "messages" or "checkout-messages" in your theme folder and in all active extensions to help you find the root cause of the issue.

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.