How to display a timer countdown from a static block

Question

I want to display a timer countdown on a HOME page like a banner.

I found the question Timer countdown in product view page, but I don't know how to use it for the home page.

Where do I put this code and how do I use them?:

PHP code:

<?php $end_datetime='your end date and time';
    $date =  date("Y/m/d H:i:s", strtotime($end_datetime));

    $endstr = date(strtotime($date));

    $nowstr = Mage::getModel('core/date')->timestamp(time());
    $now = date('Y/m/d H:i:s', $nowstr); ?>

<span id="countdown" class"countdown">
    <script>getTimer('<?php echo $date?>', '<?php echo $now ?>')</script>
</span>

JavaScript code:

function getTimer(dt, no)
{
    var end = new Date(dt);
    var now_date = new Date(no);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    flag_time = true;
    timer = '';
    setInterval(function(){showRemaining();}, 1000);

    function showRemaining()
    {
        var date = no;
        var now = new Date(date);
        var de= now.getTime();

        if (flag_time) {
            timer = de;
        }
        var d = new Date(timer);
        currentYear = d.getFullYear();
        month = d.getMonth() + 1;

        var currentDate = d.getDate();
        currentDate = currentDate < 10 ? '0'+currentDate : currentDate;

        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();

        minutes = minutes < 10 ? '0'+minutes : minutes;
        seconds = seconds < 10 ? '0'+seconds : seconds;
        var strTime = hours + ':' + minutes+ ':' + seconds;
        timer = timer + 1000;
        var now_time = currentYear + '/' + month + '/' + currentDate + ' ' + strTime;

        var now = new Date(now_time);
        var distance = end - now;

        if (distance < 0) {
            if (distance > -3)
            {
                location.reload(true);
                return;
            };

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'Completed';

            return;
        }

        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        if (days < 10)
            {days = '0' + days;}
        if (hours < 10)
            {hours = '0' + hours;}
        if (minutes < 10)
           { minutes = '0' + minutes;}
        if (seconds < 10)
            {seconds = '0' + seconds;}

        if (days==00)
        {
            dytext = '';
        }
        else if(days==1)
        {
            dytext = '<span class="countdown-text">'+ days +' Day  </span>';
        }
        else
        {
            dytext = '<span class="countdown-text">'+ days +' Days  </span>';
        }

        if (hours==00) {
            hrtext='';
        }
        else {
            hrtext = '<span class="countdown-text">'+ hours + '</span>'+ ":";
        }

        if (minutes==00)
        {
            mintext='';
        }
        else {
            mintext = '<span class="countdown-text">'+ minutes +'</span>'+ ":";
        }

        sectext = '<span class="countdown-text">'+ seconds +'</span>';
        document.getElementById('countdown').innerHTML = dytext + hrtext +  mintext + sectext;
        flag_time = false;
    }

For more information, I'm using Magento CE 1.9.2.4 and Ultimo with the Infortis theme.

Answer 1

Copy paste this in the cms block. Just change dt = new Date("2017-02-9 09:30:51"); as your requirement.

<script type="text/javascript">// <![CDATA[
    function getTimer()
    {
        dt = new Date("2017-02-9 09:30:51");
        dt = dt.getTime();
        no = new Date();
        no = no.getTime();
        var end = dt;
        var now_date = no;
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        flag_time = true;
        timer = '';

        setInterval(function(){showRemaining();}, 1000);

        function showRemaining()
        {
            var date = no;
            var now = new Date(date);
            var de = now.getTime();

            if (flag_time) {
                timer = de;
            }
            var d = new Date(timer);
            currentYear = d.getFullYear();
            month = d.getMonth() + 1;

            var currentDate = d.getDate();
            currentDate = currentDate < 10 ? '0'+currentDate : currentDate;

            var hours = d.getHours();
            var minutes = d.getMinutes();
            var seconds = d.getSeconds();

            minutes = minutes < 10 ? '0'+minutes : minutes;
            seconds = seconds < 10 ? '0'+seconds : seconds;
            var strTime = hours + ':' + minutes+ ':' + seconds;
            timer = timer + 1000;
            var now_time = currentYear + '/' + month + '/' + currentDate + ' ' + strTime;

            var now = new Date(now_time);
            var distance = end - now;

            if (distance < 0) {
                if (distance > -3)
                {
                    location.reload(true);
                    return;
                };

                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'Completed';
                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);
            if (days < 10)
                {days = '0' + days;}
            if (hours < 10)
                {hours = '0' + hours;}
            if (minutes < 10)
               { minutes = '0' + minutes;}
            if (seconds < 10)
                {seconds = '0' + seconds;}

            if (days==00)
            {
                dytext = '';
            }
            else if(days==1)
            {
                dytext = '<span class="countdown-text">'+ days +' Day  </span>';
            }
            else
            {
                 dytext = '<span class="countdown-text">'+ days +' Days  </span>';
            }

            if(hours==00) {
                hrtext='';
            }
            else {
                hrtext = '<span class="countdown-text">'+ hours + '</span>'+ ":";
            }

            if(minutes==00)
            {
                mintext='';
            }
            else {
                mintext = '<span class="countdown-text">'+ minutes +'</span>'+ ":";
            }

            sectext = '<span class="countdown-text">'+ seconds +'</span>';
            document.getElementById('countdown').innerHTML = dytext + hrtext +  mintext + sectext;
            flag_time = false;
        }
    }
    // ]]></script>

    <span id="countdown">
        <script type="text/javascript">// <![CDATA[
        getTimer()

        // ]]></script>
    </span>

Answer 2

Create a .phtml file in your theme.

The path would be:

app/design/frontend/YourPackage/YourTheme/template/yourphtml.phtml

And paste that HTML and PHP code over there.

And in the cms block write the below code.

{{block type="core/template" template="yourphtml.phtml"}}

And below that write down your JavaScript code in the script tag.

Answer 3

Solution 1:

In your theme add a local.xml file at:

app/design/frontend/Your-Package/Your-Theme/layout/local.xml

Add the below code to it:

 <?xml version="1.0"?>
   <layout version="0.1.0">
    <cms_index_index>
      <reference name="root">
         <block type="core/template" name="anyUniqueName" template="countdown/countdown.phtml" />
      </reference>
    </cms_index_index>
   </layout>

Add a template file at

app/design/frontend/Your-Package/Your-Theme/template/countdown/countdown.phtml

Solution 2:

Also you can add directly from the admin cms → pages → homepage. Add the below code.

{{block type='core/template' name='uniquename' template='countdown/countdown.phtml'}}

Add a template file at

app/design/frontend/Your-Package/Your-Theme/template/countdown/countdown.phtml

Add your code to the above file, and clear the cache.

Answer 4

You should create a .phtml file like:

app/design/frontend/package/theme/template/countdown/countdown.phtml

Then put your code in the countdown.phtml file. After that you declare it in local.xml like this:

<cms_index_index>
    <reference name="root">
        <block type="core/template" name="countdown.block" before="content" template="countdown/countdown.phtml" after="breadcrumbs" />
    </reference>
</cms_index_index>

This XML will display your countdown after a breadcrumb.