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).


12 Responses