Magento – How to use Javascript to display page messages

javascriptmagento2messagessuccess-message

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.

Best Answer

Super late answer here, but this has bugged me for the longest time and I've finally found the answer. I'm just gonna clear up some stuff about the above two answers.

It really depends on where you want to show your messages. Both of the above suggestions work but it just depends on where you are on the website.

Global Message List

From the sounds of the name, it sounds like exactly what you need. It's not. The name is actually super misleading. This is only used for checkout messages.

You can also use global message list to define a new message container on the checkout to display messages in. This is what payment gateway modules do.

Likelihood is you'll never come into contact with this.

Customer Data

The customer data messages section is for the rest of the website. This is really what you want as you're most likely not on the checkout trying to display messages.

Customer Data (customerData) can get quite messy however. By using customerData.set('messages', messages) you are completely overwriting the messages section with your new message. This can be fine for some people, but if you have crucial messages being displayed then you don't want to be overwriting them.

To completely overwrite the customer data messages object you would do the following:

define(['Magento_Customer/js/customer-data'], function (customerData) {
    customerData.set('messages', {
        messages: [{
            text: 'message to display',
            type: 'success'
        }]
    });
});

Since this overwrites all messages, you may need to append your new message to the end of the existing messages array.

This can be done like this:

define(['Magento_Customer/js/customer-data'], function (customerData) {
    var customerMessages = customerData.get('messages')() || {},
        messages = customerMessages.messages || [];

    messages.push({
        text: 'message to display',
        type: 'success'
    });

    customerMessages.messages = messages;

    customerData.set('messages', customerMessages);
});

By doing this you're not overwriting the current messages. You could also add some duplicate message protection so that you don't end up adding the same message over and over but you don't need to do that really.

The reason for the || {} and || [] is because sometimes there are no messages and will return null. If it returns null then it will use the blank object / array.

Related Topic