Magento 2 notifciation message issue

Question

My error/success messages in Magento has latency, means it appears when I go to the next page. i.e, When I add a product to cart, instead of showing a success notification message on the refresh of the page, it shows nothing and it appears when I browse to any other page next, then I see Your product has been added to cart message. Sometimes this happens all over the page and sometimes not. Random behavior

How to fix that, and move the notification message to the top instead of the bottom for all pages?

Something like this below header. It should for all pages, so instead of writing to <move> container in respective XML, I want to move it at the top for all pages.

Answer 1

On your ajax add to cart success function you need to add following lines

//Display error if found after jquery
var messages = $.cookieStorage.get('mage-messages');
if (!_.isEmpty(messages)) {
    customerData.set('messages', {messages: messages});
    $.cookieStorage.set('mage-messages', '');
}

I was facing almost same issue and fixed by this small script

And to move notification messages top of the page, please follow this link, this will help you move messages anywhere in your code

Magento 2: Change message location

Answer 2

Try This

Method-1 Using Module

app/code/VendoreName/ModuleName/view/frontend

requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Theme/js/view/messages':'VendoreName_ModuleName/js/view/messages'
        }
    }
};

app/code/VendoreName/ModuleName/view/frontend/web/js

messages.js

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'escaper',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _, escaper) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a']
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

            this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.setConf({path: '/', expires: -1}).set('mage-messages', null);

        },

        /**
         * Prepare the given message to be rendered as HTML
         *
         * @param {String} message
         * @return {String}
         */
        prepareMessageForHtml: function (message) {
            return escaper.escapeHtml(message, this.allowedTags);
        }
    });
});

Method-2 Using Theme

app/design/frontend/your-vendor-name/your-theme-name/Magento_Theme/web/js/view

messages.js

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'escaper',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _, escaper) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a']
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

            this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.setConf({path: '/', expires: -1}).set('mage-messages', null);

        },

        /**
         * Prepare the given message to be rendered as HTML
         *
         * @param {String} message
         * @return {String}
         */
        prepareMessageForHtml: function (message) {
            return escaper.escapeHtml(message, this.allowedTags);
        }
    });
});

Must be run Magento 2 commands after adding the above files

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento s:d:c
php bin/magento c:c