Add a Message Banner
Message banners appear at the top of the current page and can be used to show confirmations, errors, information, or generic messages. NetSuite Commerce provides a standardized way of showing these banners, so setup is minimal.
This is an example of a success message:
In order to implement this, you will need to add GlobalViews.Message.View to your file as a dependency.
You can then create an instance of it, like this:
var global_view_message = new GlobalViewsMessageView({
message: 'This is my example message!',
type: 'success',
closable: true
});
The message can be whatever string you want.
The type can be either success, warning, information, or message, which are pre-styled to look like those kinds of messages.
Closable indicates whether the user can click a button to hide it.
Example Usage in JavaScript
To render the example I used at the top, when a user visits a page, your code might like look this:
mountToApp: function(application)
{
var global_view_message = new GlobalViewsMessageView({
message: 'This is my example message!',
type: 'success',
closable: true
});
application.getLayout().on('afterCompositeViewRender', function () {
application.getLayout().$('[data-type=message-placeholder]').prepend(
global_view_message.render().$el
);
});
}
Example Usage in a Template
There is a custom Handlebars helper in NetSuite Commerce called displayMessage that replicates this functionality, but for use within templates instead of JavaScript.
To give another example, you might create a message that looks like this:
<div>{{displayMessage 'This is a test message that I created to show you' 'error' true}}</div>
Which results in something like this:
This can be handy if you don’t want to write JavaScript to make a visual change (eg you are working on a theme only).