1

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.

2

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>
  • Thank you very much @Qaisar .It's working fine. But is there any way to use it in another block too? for example i want to show two banners with two different timer in my home page. Is it possible to change the variables in the code? and would you please explain how to do this? – baran.jl Feb 8 '17 at 10:24
  • @baran.jl change the function name for every banner and you are good to go. also need to change id of html too – Qaisar Satti Feb 8 '17 at 10:27
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.

1

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.