CSS JS Notifications

The notifications component has a dependency with the CSS object messages

Show notification on page load

If you need to show a message when the page is loaded just add an input hidden somewhere in the DOM.

<input type="hidden"  data-fc-modules="notification" data-fc-event="load" data-fc-type="info" data-fc-text="This message is shown when this page is loaded" />

Show notification on click

	                <!-- ok notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="ok" data-fc-text="Congratulations!">Click me to show a ok notification</a></p>

<!--  ko notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="ko" data-fc-text="Error!">Click me to show a ko notification</a></p>

<!--  warning notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="warning" data-fc-text="Caution!">Click me to show a warning notification</a></p>

<!--  info notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="info" data-fc-text="Did you know?">Click me to show an info notification</a></p>

                

Show notification in a module

If you need to show a notification in a module the best way is to use the module commnication (Mediator). Here you have an example of how to show a message when a module starts.


// 1. Define your module and set 'notification' as dependency
FrontendCore.define('myModule', ['notification'], function () {
	return {
		onStart: function () {
			//2 . Publish on mediator the notification
			FrontendMediator.publish( 'notification', { type : 'ok', message: 'Your message here' } );
		},
		onStop: function () {
			// 3.Set free some memory when module stops
			FrontendMediator = null;
		},
		onDestroy: function () {
			// 4. Delete oModal to avoid memory problems
			delete this.mediator;
		}
	};
});

Attributes

data-fc-event

Defines the content to load

DEFAULT: click

data-fc-type

Type of the message (ok, ko, warning or info)

DEFAULT: ok

data-fc-text

Text to show in the message. If it's not defined the message will not be shown.