EKM Tag Documentation - ekm:category

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

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.

EKM Tag: announcement_bar