Jump to content
Sign in to follow this  

[Proof of Concept] a page countdown widget

Recommended Posts

A jquery countdown lib is used.

Add a date field of your desired template which want to display a countdown widget.

I added following code on a event template


// convert a php unix timestamp to a javascript datetime format
$js_datetime = $page->end_date * 1000;

$today = date("U");   
$end_date = date('d M Y', $page->end_date);

$out = '';
$out = "{$page->body}<br/>";
$out .= "Event ending date: {$end_date}<br/>";

if ($today > $page->end_date)
    $out .= "<h3>Event is ended.</h3>";
else {
    $js = '';
    $js .= "<script src='{$config->urls->templates}assets/js/jquery.plugin.js'></script>\r\n";
    $js .= "<script src='{$config->urls->templates}assets/js/jquery.countdown.js'></script>\r\n";
    $js .= "<script>$(function(){endDay = new Date({$js_datetime});$('#Countdown-widget').countdown({until: endDay});});</script>";    

    $out .= "<div id='Countdown-widget' class='clearfix'></div>";

$page->body = $out;


In the main.php output file, echo the $js variable, something like

<?php if ($js) echo $js; ?>

Some screenshots




With this minimal bare bone code, you could extend and add your functionality. For example, build a groupon like time limited group order page, an online event registration form

  • Like 4

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...