jQuery, PHP

Creating a Free Delivery Countdown Banner with PHP & jQuery

Recently a client asked us if it was possible to create a banner / call to action on their site which would countdown the time remaining for next day delivery on their e-commerce site. The cut off time which the timer must countdown to is 2:30pm after which the banner must no longer be visible on site. In addition to these specifics, the banner must only be visible on weekdays and hidden at weekends.

After a little research the best solution to control the countdown element of the banner was a little jQuery plugin named ‘jQuery Countdown’. A small project named ‘The Final Countdown’, available here: http://hilios.github.io/jQuery.countdown/ found on GitHub seemed the best fit for the clients outlined requirements.

So lets get started with creating countdown element.

HTML

Our first step is to call the relevant javascripts required to get the countdown timer working, below is the html to call the jQuery library, either between your pages html markup’s <head></head> tags, or before your closing </body> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Now we need to download the jQuery Countdown plugin from: http://hilios.github.io/jQuery.countdown/. Save the jquery.countdown.min.js file within your project, in this example the html markup points to the script in the sites root directory. Once the file has been saved the html below will call the file. This should again be placed either between your pages html markup’s <head></head> tags, or before your closing </body> tag, below the jQuery library.

<script src="jquery.countdown.min.js"></script>

Now that the scripts are in place we add the html to our pages markup that will be our countdown timer banner.

<div id="delcta">
    <p>Time left for Free Next Day Delivery: <span id="countdowntimer"></span></p>
</div>

jQuery

The final step to get the countdown timer working is to add the following jQuery which will tell the plugin which element within our pages html should be used to execute the countdown on, along with what should be displayed and counted down.

<script type="text/javascript">
    $('#countdowntimer').countdown('2015/12/12 14:30:00').on('update.countdown', function(event) {
        var $this = $(this).html(event.strftime(''
            + '%H Hours '
            + '%M Minutes '
            + '%S Seconds'
        ));
    });
</script>

With all of the above correctly in place, our countdown timer should now render and countdown, displaying the hours, minutes and seconds to the time and date set in the above script: 2015/12/12 14:30:00.

PHP

Now with our current implementation we would be required to modify the date every day for our timer to count down to 14:30 which in this example is the client’s Free Delivery cut off time. So to save us from constantly modifying this code, we can implement some php within our page, which will update the count down date for us to the next day.

<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?>

The above php needs to replace the date: 2015/12/12 used in our example jQuery and should look like this.

<script type="text/javascript">
    $('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00').on('update.countdown', function(event) {
        var $this = $(this).html(event.strftime(''
            + '%H Hours '
            + '%M Minutes '
            + '%S Seconds'
        ));
    });
</script>

With any luck you should now have a functioning countdown timer that will constantly reset for you every day and countdown to our 14:30 (2:30pm) delivery time.

The final step’s are to stop the countdown banner from displaying after the 2:30pm next day delivery cut off time and to not display at weekends. This can be achieved by adding the following php to our markup.

<?php
    date_default_timezone_set('GMT');
    $currentTime = date('H:i:s');
    $currentDay = date('w');
    $delTimeStart = '00:00:00';
    $delTimeEnd = '14:30:00';
    if ($currentTime >= $delTimeStart && $currentTime < $delTimeEnd && $currentDay > 0 && $currentDay < 6){
        $css = 'display: block;';
    } else {
        $css = 'display: none;';
    }
?>

Please be aware that the above php statement has the timezone set to GMT and needs to be changed appropriately to your required timezone. Please also be aware that any clock discrepancies may be down to your servers timezone / clock settings.

The very last step is to add some inline styling to our banners html markup with a php variable which calls the display: block or display: none styling from the above php based on our defined time and weekend variables.

style="<?php echo $css ?>"

Once the above code is added to our banner’s html element, it should look like the below.

<div id="delcta" style="<?php echo $css ?>">
    <p>Time left for Free Next Day Delivery: <span id="countdowntimer"></span></p>
</div>

The Entire Page

Ok, so we should now have a working countdown banner that will only display on weekdays. Below is the entire markup for this to work in a basic php document.


<html>

    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.countdown.min.js"></script>

    </head>

    <body>

        <?php
            date_default_timezone_set('GMT');
            $currentTime = date('H:i:s');
            $currentDay = date('w');
            $delTimeStart = '00:00:00';
            $delTimeEnd = '14:30:00';
            if ($currentTime >= $delTimeStart && $currentTime < $delTimeEnd && $currentDay > 0 && $currentDay < 6){
                $css = 'display: block;';
            } else {
                $css = 'display: none;';
            }
        ?>

        <div id="delcta" style="<?php echo $css ?>">
            <p>Time left for Free Next Day Delivery: <span id="countdowntimer"></span></p>
        </div>

        <script type="text/javascript">
            $('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00').on('update.countdown', function(event) {
                var $this = $(this).html(event.strftime(''
                    + '%H Hours '
                    + '%M Minutes '
                    + '%S Seconds'
                ));
            });
        </script>

    </body>

</html>

You can download the complete markup and jQuery countdown plugin here: Download the Complete Countdown Banner Code

Below is the final working example (remember that if its currently a weekend or after 2:30pm (GMT) it will not be visible).

Update: Dynamically Change Plurals in Time Labelling

Recently I was contacted to see if it was possible to amend the labelling of the hours, minutes and seconds to display non plural versions when appropriate, for instance 1 hours would dynamically change to 1 hour etc.

We can achieve this by tweaking the variables in our jQuery as displayed below:

<script type="text/javascript">
    $('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00').on('update.countdown', function(event) {
        var $this = $(this).html(event.strftime(''
            + '%H %!H:hour,hours; '
            + '%M %!M:minute,minutes; '
            + '%S %!S:second,seconds;'
        ));
    });
</script>

Update: Removing Leading Zero Values on Displayed Time

In the above mentioned contact, I was also asked if it was possible to remove the leading zero values displayed in the time, which again can be done quite simply by adjusting the hours, minutes and seconds values in our jQuery, by adding a minus value ‘-‘ as demonstrated below:

<script type="text/javascript">
    $('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00').on('update.countdown', function(event) {
        var $this = $(this).html(event.strftime(''
            + '%-H %!H:hour,hours; '
            + '%-M %!M:minute,minutes; '
            + '%-S %!S:second,seconds;'
        ));
    });
</script>

The changes outlined above can now be downloaded in a complete package here: Download the Complete Updated Countdown Banner Code

Below is the updated working example (remember that if its currently a weekend or after 2:30pm (GMT) it will not be visible).


16 Responses

  1. The Tooz
    January 29, 2015

    Mathew –

    I like the timer.

    I have a question, but before I ask I wanted to see if you were still taking question.

    Thanks,

    The Tooz

    Reply
    • Porter
      February 11, 2015

      Yes Tooz, whats your question?

      Reply
  2. Rudy
    May 27, 2015

    Hi Mathew,

    Do you know of a way to add exceptions for holidays? It would be great if I could add a number of dates where the timer wouldn’t be visible all day long.

    Thanks

    Reply
    • Porter
      May 28, 2015

      Hi Rudy, yes I have done so as a bespoke development for Clog Hog who have this in place on their site: Clog Hog.

      Reply
      • Rudy
        June 10, 2015

        Can you send me a quote to make this work for me also?

        Reply
        • Porter
          October 23, 2015

          Hi Rudy, what do you require doing? Please feel free to drop me an email via the contact page.

          Reply
      • Dave
        October 18, 2017

        I’d like to buy the script as used on that website, (it it does holidays). can it also be made to display nothing or an image if the cut off time has lapsed rather than say order in 23:59:59? (Then reset at midnight to show the count down timer again)

        Reply
  3. Sam
    July 29, 2015

    thanks for the great code, i’ve implemented the code as above but the timer dose not countdown unless i refresh the page?

    Reply
    • Porter
      October 23, 2015

      Are you sure that you have jQuery and the jQuery Countdown scripts are in the page?

      Reply
  4. Phil
    August 12, 2015

    I’m impressed with this, it’s a handy tool for ecommerce sites.
    Quick question please if I may.

    If a user lands on the page say 20 seconds before the cut off point, for example if its currently just before the beginning of a weekend or just before 2:30pm (GMT) and remains on the page, does the display disappear without a page refresh? Looking at the code the display: none; is dependant on the alternative css class

    Reply
    • Porter
      October 23, 2015

      Unfortunately not. Due to my solutions getting the time from php, based on the servers time / timezone that is then used by the jQuery it is dependant on page load.

      Reply
  5. Abhilash Raj R S
    October 20, 2015

    i need a redirect after the timer ends. can u help me on this

    Reply
    • Porter
      October 23, 2015

      It would depend on how you are using the scripts?

      Reply
  6. Phil
    October 18, 2017

    Hi, I implemented your script – works great apart from one small glitch… when the countdown has finished, the timer is still visible (it restarts again at 23 hrs 59 mins 59 secs)

    I have tried changing my PC clock to simulate a countdown coming to an end and still have the same problem.

    I note that the example on this page also has the same issue. Do you have a fix or am I doing something wrong?

    Reply
    • Mathew
      October 27, 2017

      Hi Phil.

      This is not a glitch, a page refresh will be required to hide the element targetted by the php script due to this aspect being controlled by php, a server side script. Also your PC clock is probably not being used by Apache running on a local server, but try to display Apache’s time on the page for local testing to ensure the time / time zone is correct for that outlined as the cut off in the php script.

      Reply

Leave a Reply