plugin Front Notification introduces a new type of "Newsflash" content, making it easier to integrate alerts, notifications and newsflashes into site pages.
The "Flash info" type consists of the following fields:
a title
a simple short text (text)
rich text (content)
a start date (start-date)
an end date
a boolean to hide dates
plugin also provides a JS helper for integrating newsflashes as popups or banners.
The helper displays the alert(s) one by one.
It can integrate "I've read" and "Remind me later" buttons:
"I've read": allows you to store in localStorage (in anonymous mode) or in user preferences (in connected mode) that the info has been read and no longer needs to be displayed to the user. Displays the next info if there is one, otherwise closes the popup or banner.
"Remind me later": Displays the next info if there is one, otherwise closes the popup or banner. The info will be displayed again the next time the user visits (or refreshes the page).
Integration examples
Filter definition
We define a filter (inputdata) in the template(s) that are to display the flash info ( filters/defaultfile .xml templates).
For example:
Oops!
Copy to clipboard failed. Open the code and copy it manually.
The above filter brings up all newsflashes labeled "Blocking newsflash", sorted by start date, whose start date is less than the current date and whose end date is greater than the current date.
The rights of the current user are taken into account with <handle-user-access>true</handle-user-access>It is therefore possible to target the information to be displayed according to the user's group, for example (via rights management Ametys). Use only on pages with limited access!
Integration HTML
The HTML link to display a newsflash is not compulsory.
each content must be inserted inside the popup or banner, dans un <div> englobant avec l'attribut data-flashinfo-id containing a unique identifier. For example {@id}@{@lastModifiedAt}
to integrate a "Call me later" button add onclick="AmetysFlashInfo.showLater()" on the clickable element
to integrate a "I've read" button add onclick="AmetysFlashInfo.markAsRead()" on the clickable element
define the JS methods that will be called to hide and display the banner or popup
Finally, initialize the popup or banner by calling AmetysFlashInfo.initialize(selector, onShow, onHide, contextPath)where:
selectorjquery selector to identify the popup or banner containing flash info
onShowJS function to be called to display the popup/banner
onHideJS function that will be called to hide the popup/banner
contextPathto be initialized with ametys:siteUriPrefix()
Example of popup integration
Oops!
Copy to clipboard failed. Open the code and copy it manually.
<xsl:iftest="/cms/inputData/Model/flashinfos/content and ametys:renderingContext() = 'front'"><divclass="flashinfo-popup"style="display: none;"><h2class="flashinfo-header"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_TITLE"i18n:catalogue="skin.{$skin}"/></h2><!-- Iterate over flash info contents --><xsl:for-eachselect="/cms/inputData/Model/flashinfos/content"><divclass="flashinfo-content"data-flashinfo-id="{@id}@{@lastModifiedAt}"><xsl:apply-templatesselect="html/body/node()"mode="move-hierarchy"><xsl:with-paramname="level"select="3"/></xsl:apply-templates></div></xsl:for-each><divclass="flashinfo-bottom"><ahref="#"class="btn close"onclick="AmetysFlashInfo.showLater()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_CLOSE"i18n:catalogue="skin.{$skin}"/></a><ahref="#"class="btn donotshowagain"onclick="AmetysFlashInfo.markAsRead()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_DONOTSHOWAGAIN"i18n:catalogue="skin.{$skin}"/></a></div></div><divclass="flashinfo-popup-overlay"></div><scripttype="text/javascript">function hideBanner(){
$j('.flashinfo-popup').remove();
$j('.flashinfo-popup-overlay').remove();}function showBanner(){
$j('.flashinfo-popup').show();
$j('.flashinfo-popup-overlay').show();}
$j().ready(function(){// Init and show flash info popupAmetysFlashInfo.initialize(".flashinfo-popup", showBanner, hideBanner,"<xsl:value-of select="ametys:siteUriPrefix()"/>");});</script></xsl:if></xsl:template>
<xsl:iftest="/cms/inputData/Model/flashinfos/content and ametys:renderingContext() = 'front'"><divclass="flashinfo-popup"style="display: none;"><h2class="flashinfo-header"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_TITLE"i18n:catalogue="skin.{$skin}"/></h2><!-- Iterate over flash info contents --><xsl:for-eachselect="/cms/inputData/Model/flashinfos/content"><divclass="flashinfo-content"data-flashinfo-id="{@id}@{@lastModifiedAt}"><xsl:apply-templatesselect="html/body/node()"mode="move-hierarchy"><xsl:with-paramname="level"select="3"/></xsl:apply-templates></div></xsl:for-each><divclass="flashinfo-bottom"><ahref="#"class="btn close"onclick="AmetysFlashInfo.showLater()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_CLOSE"i18n:catalogue="skin.{$skin}"/></a><ahref="#"class="btn donotshowagain"onclick="AmetysFlashInfo.markAsRead()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_DONOTSHOWAGAIN"i18n:catalogue="skin.{$skin}"/></a></div></div><divclass="flashinfo-popup-overlay"></div><scripttype="text/javascript">function hideBanner(){
$j('.flashinfo-popup').remove();
$j('.flashinfo-popup-overlay').remove();}function showBanner(){
$j('.flashinfo-popup').show();
$j('.flashinfo-popup-overlay').show();}
$j().ready(function(){// Init and show flash info popupAmetysFlashInfo.initialize(".flashinfo-popup", showBanner, hideBanner,"<xsl:value-of select="ametys:siteUriPrefix()"/>");});</script></xsl:if></xsl:template>
Example of banner integration
Instead, we'll use the "abstract" view with a "Learn more" link (displayed if the flash info's rich content is not empty).
Oops!
Copy to clipboard failed. Open the code and copy it manually.
<xsl:iftest="/cms/inputData/Model/flashinfos/content and ametys:renderingContext() = 'front'"><divclass="flashinfo-banner"style="display: none;"><xsl:for-eachselect="/cms/inputData/Model/flashinfos/content"><divclass="flashinfo-banner-inner"data-flashinfo-id="{@id}@{@lastModifiedAt}"><xsl:copy-ofselect="html/body/node()"/></div></xsl:for-each><divclass="flashinfo-banner-buttons"><ahref="#"class="btn close"onclick="AmetysFlashInfo.showLater()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_CLOSE"i18n:catalogue="skin.{$skin}"/></a><ahref="#"class="btn donotshowagain"onclick="AmetysFlashInfo.markAsRead()"><i18n:texti18n:key="SKIN_FLASH_INFO_BANNER_DONOTSHOWAGAIN"i18n:catalogue="skin.{$skin}"/></a></div></div><scripttype="text/javascript">function hideBanner(){
$j('.flashinfo-banner').remove();}function showBanner(){
$j('.flashinfo-banner').show();}
$j().ready(function(){// Init and show flash info popupAmetysFlashInfo.initialize(".flashinfo-banner", showBanner, hideBanner,"<xsl:value-of select="ametys:siteUriPrefix()"/>");});</script></xsl:if>