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:
<filter id="flashinfos" target="content"> <context type="current-site"/> <content-types> <type id="org.ametys.plugins.front-notification.Content.flashinfo"/> </content-types> <view>main</view> <tags> <tag key="BLOCKING_FLASH_INFO"/> </tags> <metadata condition="AND"> <metadata id="start-date" type="date" operator="lte">today</metadata> <metadata id="end-date" type="date" operator="gte">today</metadata> </metadata> <sort-information> <sort metadataId="start-date" ascending="false"/> </sort-information> <handle-user-access>true</handle-user-access> </filter>
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.
To use the JS helper:
- Import file
<script type="text/javascript" src="{ametys:pluginResourceURL('front-notification', 'js/FlashInfo.js')}"></script>
- 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
<xsl:if test="/cms/inputData/Model/flashinfos/content and ametys:renderingContext() = 'front'">
<div class="flashinfo-popup" style="display: none;">
<h2 class="flashinfo-header"><i18n:text i18n:key="SKIN_FLASH_INFO_BANNER_TITLE" i18n:catalogue="skin.{$skin}" /></h2>
<!-- Iterate over flash info contents -->
<xsl:for-each select="/cms/inputData/Model/flashinfos/content">
<div class="flashinfo-content" data-flashinfo-id="{@id}@{@lastModifiedAt}">
<xsl:apply-templates select="html/body/node()" mode="move-hierarchy">
<xsl:with-param name="level" select="3"/>
</xsl:apply-templates>
</div>
</xsl:for-each>
<div class="flashinfo-bottom">
<a href="#" class="btn close" onclick="AmetysFlashInfo.showLater()"><i18n:text i18n:key="SKIN_FLASH_INFO_BANNER_CLOSE" i18n:catalogue="skin.{$skin}" /></a>
<a href="#" class="btn donotshowagain" onclick="AmetysFlashInfo.markAsRead()"><i18n:text i18n:key="SKIN_FLASH_INFO_BANNER_DONOTSHOWAGAIN" i18n:catalogue="skin.{$skin}" /></a>
</div>
</div>
<div class="flashinfo-popup-overlay"></div>
<script type="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 popup
AmetysFlashInfo.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).
<xsl:if test="/cms/inputData/Model/flashinfos/content and ametys:renderingContext() = 'front'">
<div class="flashinfo-banner" style="display: none;">
<xsl:for-each select="/cms/inputData/Model/flashinfos/content">
<div class="flashinfo-banner-inner" data-flashinfo-id="{@id}@{@lastModifiedAt}">
<xsl:copy-of select="html/body/node()"/>
</div>
</xsl:for-each>
<div class="flashinfo-banner-buttons">
<a href="#" class="btn close" onclick="AmetysFlashInfo.showLater()"><i18n:text i18n:key="SKIN_FLASH_INFO_BANNER_CLOSE" i18n:catalogue="skin.{$skin}" /></a>
<a href="#" class="btn donotshowagain" onclick="AmetysFlashInfo.markAsRead()"><i18n:text i18n:key="SKIN_FLASH_INFO_BANNER_DONOTSHOWAGAIN" i18n:catalogue="skin.{$skin}" /></a>
</div>
</div>
<script type="text/javascript">
function hideBanner() {
$j('.flashinfo-banner').remove();
}
function showBanner() {
$j('.flashinfo-banner').show();
}
$j().ready(function() {
// Init and show flash info popup
AmetysFlashInfo.initialize(".flashinfo-banner", showBanner, hideBanner, "<xsl:value-of select="ametys:siteUriPrefix()"/>");
});
</script>
</xsl:if>
Back to top