1

Is it possible to use JavaScript to display a page message? I would like to display one when I receive an ajax response on a custom module I'm working on.

You can see an example of one of these messages after you save your user account info on the frontend.

enter image description here

I know I can build this markup with jQuery and add it to the page, but am wondering if Magento provides a better way of doing this.


I looked at Magento_Theme/js/view/messages and thought maybe I could include it as a dependency of my JavaScript module. Setting the message in the jQuery cookieStorage API which Magento uses to retrieve the message info in Magento_Theme/js/view/messages.

define ([
    'jquery',
    'Magento_Theme/js/view/messages',
    'jquery/jquery-storageapi',
], function ($, messages) {
    'use strict';

    return function () {
        $.cookieStorage.set('mage-messages', [{type: "success", text: "custom message text"}]);
        messages();
    }
}

All though this approach did not work, even though I could see that the message info was retrieved in Magento_Theme/js/view/messages with

this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');

It was not displayed on the frontend.

5

You can use something like following:

    define([
    'mage/url',
    'Magento_Ui/js/model/messageList'
], function (url, globalMessageList) {
    'use strict';
    return {
        /**
         * @param {Object} response
         * @param {Object} messageContainer
         */
        process: function (response, messageContainer) {
            var error;

            messageContainer = messageContainer || globalMessageList;

            if (response.status == 401) { //eslint-disable-line eqeqeq
                window.location.replace(url.build('customer/account/login/'));
            } else {
                var message = response && response.message;

                if (message) {
                    if (message.type === 'error') {
                        messageContainer.addErrorMessage({
                            message: message.text
                        });
                    } else {
                        messageContainer.addSuccessMessage({
                            message: message.text
                        });
                    }
                }
            }
        }
    };
});
  • Thanks that looks good, but for some reason is not working for me – Holly Aug 10 '18 at 11:54
  • Is there error? you you please add what have you tried? – Prakash Thapa Aug 10 '18 at 12:18
  • its code where should be add? – SUDHAKAR ARUNACHALAM Mar 20 at 7:52
2

I was able to get this working by using Magento_Customer/js/customer-data as a dependency of my JavaScript module. And using the customerData.set() function on it.

define ([
    'jquery',
    'Magento_Customer/js/customer-data'
], function ($, customerData) {
    'use strict';

    return function () {
        var msg = 'some message here';

        customerData.set('messages', {
            messages: [{
                type: 'success',
                text: msg
            }]
        });
    }
}
  • It works for me, but the notice shows for a while and suddenly gets hidden. Please let me know what I need to do to show notice same as normal magento notices work. – Dhara Bhatti Dec 7 '18 at 8:34
  • @DharaBhatti is this happening for you on the checkout, I remember coming across this too. Weirdly it seems to be the default behaviour of Magento, if you copy Magento_Ui/web/template/messages.html to your theme and remove visible: isVisible() from <div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll"> it should fix it. – Holly Dec 7 '18 at 14:20

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.