The Countdown Component

Description

How to use the countdown component?

This documentation explains how to set up a countdown at your page.

Dependencies

To use this countdown you have to make sure that your page is loading the cotton-ball library.

Important

Please keep the following points in mind before you think: "Why is this not working!?"

always set the data-date attribute to a date in the future, because negative values for a countdown are not displayed
write the configuration-div always on top of the page to make sure that is not in a section that get's lazy loaded
make sure the data-variant attribute uses values matching to your countdown position

Configuration

There are 3 ways you can use the countdown. You can inject it into a Hero- or Banner-Teaser and you can use it as a self-injected component. Self-injected means that the countdown will show up on the position where it is written in your html.

You can insert as much countdown elemtents as you need on one page.

Hero-teaser countdown

To use the countdown in a Hero-Teaser you need the following information:

Mandatory: Hero section ID (e.g. #c41665)
Optional: a sub-div classname of the hero section ID (e.g. .teaser--hero__box)

Here is an example configuration for a Hero-Teaser:

<div
    class="tui-component tui-component-countdown"
    data-date="10-12-2018"
    data-time="23:59"
    data-display="days-hours-mins-secs"
    data-target-selector="#c41665 .teaser--hero__box"
    data-variant="hero--center-bottom"
></div>

If you don't specify the sub-div's classname of the hero, the countdown element will use the complete width of the page for it's positioning. Therefore using a sub-div's classname is the common usage on the tui.com page.

Here is an another example configuration for a Hero-teaser without the sub-div classname:

<div
    class="tui-component tui-component-countdown"
    data-date="10-12-2018"
    data-time="23:59"
    data-display="days-hours-mins-secs"
    data-target-selector="#c41665"
    data-variant="hero--left-middle"
></div>

Banner-teaser countdown

Using the countdown in a Banner-teaser you will need an ID or a unique classname of a banner where you want to inject the countdown into.

And you need to change the data-variant attribute.

Here is an example configuration:

<div
    class="tui-component tui-component-countdown"
    data-date="10-12-2018"
    data-time="23:59"
    data-display="days-hours-mins-secs"
    data-target-selector="#c41461"
    data-variant="banner--center-top"
></div>

Self-injected countdown

Self-injected countdown components are configured like banner- or hero-teaser countdowns but without the data-target-selector and a changed data-variant attribute.

Here is an example configuration:

<div
    class="tui-component tui-component-countdown"
    data-date="24-12-2018"
    data-time="00:00"
    data-display="days-hours-mins-secs"
    data-variant="large">
</div>

Maintainer	picr-developmentb2c-tuicom@tui.com
Locales	`de-DE`

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/countdown/ui/" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<div class="tui-component tui-component-countdown"
	data-date="VALUE"
	data-time="VALUE"
	data-target-selector="VALUE"
	data-display="VALUE"
	data-variant="VALUE">
</div>

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
`date`	With the date attribute you can determine the date when the countdown should end. E.g. if you define the 12th of July in the date-attribute, the countdown will calculate the days it has to display from now to the defined day.	`^[\d]{2}-[\d]{2}-[\d]{4}$`		yes
`time`	With the time attribute you can determine the time belonging to the predefined date. With this information the countdown can calculate hours, minutes and seconds to be displayed from now.	`^[\d]{2}:[\d]{2}$`		yes
`target-selector`	Element on the page where the countdown should be injected to.			yes
`display`	Configurates cards template			yes
`variant`	Determines which type of the countdown you will use and the position of the countdown or the size of the countdown.			yes
`days`	Card label for days.		`Tage`	no
`hours`	Card label for hours.		`Stunden`	no
`mins`	Card label for minutes.		`Minuten`	no
`secs`	Card label for seconds.		`Sekunden`	no