Display a live countdown that changes the look when it hits zero.

Basic Usage

To quickly get started, you can test this by setting a countdown to three days from now.

{% assign exampleDate = 'Now' | DateAdd:3, 'd' | Date:"yyyy-MM-ddTHH:mm:ss.fffffffK" }}
<rockCountdown startDateTime="{{ exampleDate }}" />

See the Lava documentation if you're unfamiliar with the provided value of the StartDateTime property.

Lava Shortcode

You can also utilize the scheduledcontent Lava shortcode.

{[ scheduledcontent scheduleid:'3' showwhen:'both' ]}
    <rockCountdown startDateTime="{{ NextOccurrenceDateTime | Date:"yyyy-MM-ddTHH:mm:ss.fffffffK" }}" />
{[ endscheduledcontent ]}

Properties

Countdown Visibility Tri-State

For this type, there are three accepted values:

Children

Here is a list of all the accessible children to this element, that have unique functionalities if included.

Example With Children

<rockCountdown startDateTime="{{ 'Now' | DateAdd:3, 'd' }}">
    <completedPanel>
        <completedMessage>
            <title>We're live!</title>
            <text>Join now to participate in the live stream.</text>
        </completedMessage>
        <completedButton rockCommand="pushPage" 
            rockPageGuid="a3ce6e84-dcbd-420d-a453-0ed3b88b966e">
            <text>Watch Now</text>
        </completedButton>
    </completedPanel>
</rockCountdown>

Completed Command

In some cases, you may want to execute a command when the countdown hits zero. This can be done by setting the completedCommand property. In addition to the completed command, you should also provide any additional attributes that are used as parameters for the command you are executing.

<rockCountdown startDateTime="{{ 'Now' | DateAdd:3, 'd' }}" 
    completedCommand="playVideo" 
    rockVideoUrl="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    <completedPanel>
        <completedMessage>
            <title>We're live!</title>
            <text>Join now to participate in the live stream.</text>
        </completedMessage>
        <completedButton rockCommand="pushPage" 
            rockPageGuid="a3ce6e84-dcbd-420d-a453-0ed3b88b966e">
            <text>Watch Now</text>
        </completedButton>
    </completedPanel>
</rockCountdown>

This example would play a video upon the countdown completion. In addition to a completed command, in most cases you should still provide content in the completedPanel.

When the page is loaded, and the countdown is under a certain value, you may not want to execute the completed command. For instance, let's say you wire up the countdown to play a video. If you were to load the page with three seconds left in the countdown, you could be navigated to the video screen before even realizing what is going on. That's why we introduced a property named completedCommandSecondThreshold. This property represents the number (in seconds) to not execute the completed command within, checked when the control is initialized.

Styling

To style this element, you have access to multiple different unique styles, Here is the corresponding x-ray for the countdown control.

Countdown control CSS X-Ray.

Countdown control completed content CSS X-Ray.

You can see the type of element that the style is targeting to the right of the class name. This particular control is comprised solely of RockStackViews and RockLabels. Look at those pages for more detail on the properties you can change via CSS.