5

Sometimes the notification messages don't get disappear on page reload or when I navigate to the different page.

Is there some kind of timeout for the notification message or some session cookies?

I followed this link

Magento 2 : Error/Success message won't remove from page after refresh once display

But where should I put this code so that _deleteMessage call every time when the page reloads or user navigates to a different page.

This issue is more prominent in iPhone devices safari browser.

This is my code in messages.js

  this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
  this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
  if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
  customerData.set('messages', {messages: ""});
  $.cookieStorage.set('mage-messages', '');

On further debugging, My code randomly breaks anywhere due to WebAPI socket error on console js debugging.

So this WebAPI socket error doesn't let this cookie clear. This issue is intermittent.

Thanks in advance

5
  • I had this issue once. disabling the Customer Notification cache solved my issue Mar 11 '19 at 14:41
  • @PhilippSander How to disable the Customer Notification cache
    – summu
    Mar 11 '19 at 14:45
  • @PhilippSander got it from admin panel
    – summu
    Mar 11 '19 at 14:48
  • @summu: I am also facing the same issue in iPhone (safari), can you please let me know how you fix it Mar 3 '20 at 10:10
  • @PurushotamSharma added my answer, it was my only option to use setInterval, i know its a hacky solution
    – summu
    Mar 3 '20 at 10:17
0

For anyone coming across this problem where notification messages persist across refreshed pages here are some tips that might help you resolve the problem.

  • I first noticed this problem with Magento 2.4.1
  • I mostly notice it on my development and staging servers
    • These servers are not in production mode

If you look at magento-theme/view/frontend/web/js/view/messages.js you will see where these notification messages are read from the mage-messages cookie and passed to the backend for display.

You will notice that the function cleans up the mage-messages cookie

    $.mage.cookies.set('mage-messages', '', {
        samesite: 'strict',
        domain: ''
    });

If you add a console info log here, you can see that this executes with every page refresh. However, if you monitor the mage-messages cookie in the console you can sometimes see the cookie being set, deleted, and set again. This leads to the cookie persisting to the next page.

Whether this has to do with delays in the backend often seen on slower servers i.e. development / development mode or it's a new 2.4 bug I am not sure.

One way to ensure that the cookie is reset after being processed is to add another cleanup function to the prepareMessageForHtml function. Note this function is only present in 2.4.x

        // Bug hunting cookie cleanup for persistent frontend notification messages
        //
        //
        (function CookieCleanup(i) {
          setTimeout(function() {

              if ($.mage.cookies.get('mage-messages') !=='' )
              {
                  // cleanup
                  $.mage.cookies.set('mage-messages', '', {
                      samesite: 'strict',
                      domain: ''
                  });
                  console.info('Debug Cookie cleanup in progress...');
              }

              // keep on scrubbin'...
              if (--i) CookieCleanup(i);

          }, 3000)
        })(3);

In summary if you are seeing this message during development on 2.4.x try going to production mode with all caches enabled first. Debug further by adding console logs to messages.js.

1
  • Please fix magento-theme/view/frontendweb/js/view/messages.js to magento-theme/view/frontend/web/js/view/messages.js in your answer
    – Black
    Mar 18 at 11:07
-2

I resolved it using setInterval,

    return Component.extend({
    defaults: {
        cookieMessages: [],
        messages: []
    },

    /** @inheritdoc */
    initialize: function () {
        this._super();

        $('#validation-login-cust').html('');
        $('#valid-promo-cart').html('');
        try {
            var message = _.unique($.cookieStorage.get('mage-messages'), 'text');
            var textMessage =  JSON.parse(message[0]["text"]);
            if (textMessage['type'] === "inline"){
                $(textMessage["selector"]).text(textMessage["message"]).css('color', 'red');
            }

            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            customerData.set('messages', {messages: ""});
            $.cookieStorage.set('mage-messages', '');

        }catch (e) {

            $('#validation-login-cust').html('');
            $('#valid-promo-cart').html('');
            var messageText = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
            if (messageText) {
                if (messageText["text"].trim() == "Invalid Form Key. Please refresh the page.") {
                    this.cookieMessages = 'OOps! Something went wrong, Please try again later or refresh the page.';
                } else {
                    this.cookieMessages = messageText;
                }
            }
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
        }
        var setCookieInterval = setInterval(function()
        {
            $.cookieStorage.set('mage-messages', '');
            YX_UI_UTIL.eraseCookie("mage-messages");

        }, 3000);
        setTimeout(function( ) { clearInterval(setCookieInterval); }, 10000);
    }
});
1
  • 1
    Where did you added above code Sep 16 '20 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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