In the default theme, notifications can be displayed to visitors in connection with different events.

Basics

Notifications are created by using the default theme's notifications.js plugin.

The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.

The default theme includes jQuery by default.

The plugin can be found in the default theme's file /scripts/plugins/notifications.js.

The notification layout can be defined in the file /styles/scss/common/_notifications.scss.

The notification plugin cannot be used for displaying the notifications printed by the {Notifications} tag, so this required tag cannot be left out of the theme.

The plugin will attempt to add notifications to the .NotificationCenter element. If the element is missing, the plugin will add it at the end of the document and print notifications there.

The notification's HTML markup is defined in the plugin's JavaScript file.

By default, notifications are displayed for 5 seconds, after which they disappear automatically. You can adjust the notification display time while initializing the plugin.

The example below shows how to initialize the plugin and adjust the notifications' display time:

MCF.Notifications.init({
	timeToLive: 500
});

Notifications types

The plugin contains three distinct notification functions. The functions produce markup for which you can define individual appearances.

  • message(html) (neutral notifications)
  • success(html)
  • error(html)
  • loading(html)

To display a text or HTML markup in the notification, indicate it as the value of the html parameter. See the next section to learn more.

Displaying notifications

After the plugin has been initialized, it can publish a notification whose text or HTML markup will be added as a parameter to the selected notification function:

MCF.Notifications.success("<strong>Great success!</strong>");

You can also retrieve the notification text from the theme's language file:

MCF.Notifications.success("<strong>" +
	MCF.Locales.get("greatSuccessText")
+ "</strong>");

In such a case, the notification text will be displayed in the language of the version that has been selected by the customer (if it has been added to the language file in that language).