Notifications

The notifications component has a dependency with the CSS object messages

<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="success" data-fc-text="Congratulations!">Click me to show a success notification</a></p>

<!--  ko notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="error" data-fc-autoclose="3" data-fc-text="Error!">Click me to show an error 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.

FrontendCore.define('myModule', [], function () {
	return {
		onStart: function () {

			// 1. Require and start the 'notification' module
			FrontendCore.requireAndStart( ['notification'], function(){
				//2 . On callback use the mediator to publish the notification
				FrontendMediator.publish( 'notification', { type : 'success', message: 'Your message here' } );
			});
		}
	};
});

Attributes

data-fc-event

Defines the content to load

DEFAULT: click

data-fc-type

Type of the message (success, error, 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.

data-fc-autclose

Defines how many seconds the message will be shown (1, 2, 3...). Also can disable autoclose (set it to false). By default is 5 seconds.