exit-icon
Request a callback
Request a callback

Enter your number and one of our friendly ecommerce experts will be in touch. All fields are required.

Speak to our experts today 0333 004 0333
Speak to one of our experts today or callback-group-circleRequest a callback
User Guides

EKM Tag: announcement_bar

This tag is designed for outputting a site wide bar containing a message to the customer as part of the Quick Announcement feature. It can also be used to add site-wide messaging to the Holiday Mode feature.

  • Tag Information

The announcement_bar is designed to appear at the top of the EKM Shop and is 'sticky', meaning that it will follow the user down the page as they scroll.

Basic Use
In its most basic use the announcement_bar outputs messaging for the Quick Announcement and Holiday Mode features above all theme content.

[ekm:announcement_bar]
    output_start='<div>';
    output_end='</div>';
    height_change_callback='
        <script>
            function fixFixedHeader(height){
                var el = document.querySelector('.header-section.sticky-area');
                if (!el) return;
                el.style.top = height + 'px';
            }          
        </script>
    ';
[/ekm:announcement_bar]
								
Advanced Use
Here is an example of advanced use of the ekm:announcement_bar tag.

[ekm:announcement_bar]

    output_start='';
    output_end='';
    height_change_callback='';	
    
    include_javascript='';

    include_list='';

[/ekm:announcement_bar]
								
Tag Attributes
Output Start

Here you can specify what will be output at the start of the ekm:announcement_bar. Typically you would start to output some HTML.

Example: You could open a containing div at this point followed by a class attribute in order for you to target the bar with custom styling.

Value
Description
{user defined}
Specify your own starting HTML.
Output End

Here you will close any HTML tags that were opened within the output_start attribute.

{user defined}
Define any closing HTML tags you opened in the output_start attribute.
Height Change Callback

Allows you to specify the name of a JavaScript function in the global scope that will be called when the height of any announcement bars change.
This is useful if you have other "sticky" elements in the theme and you want to offset them when a bar exists in the page or the bar resizes due to screen size adjustments.

Value
Description
{user defined}
Make use of an existing script function or write your own.
Include JavaScript

Here you can specify whether or no to output the tag JavaScript.

Value
Description
yes (Default)
This value outputs the tag JavaScript
no
This value will output no JavaScript from the tag
Include List

Here you can specify the announcements you wish to include within the output. (Note: You can add multiple values by separating them with a comma)

Value
Description
quick-announcement-bar
This value will trigger the output of the Quick Announcement feature only.
holiday-mode-site-wide-banner
This value will trigger the Site Wide output of the Holiday Mode feature only.