jakobloekkemadsen.com - Usability. Information Architecture. Design.

The problem

Recently I was asked by an e-commerce client if I could create a banner on his website that would let visitors know whether the phone hotline of the store is currently open or closed based on store opening hours.

In a PHP-based CMS the only task involved would have been writing a function outputting some HTML for use in the banner. So this should have been a no-brainer, had it not been for the fact that my client’s website is run in a proprietary, hosted (and heavily outdated) CMS with no server-side access what so ever!

My first thought was then to make a solution entirely in Javascript. This would be very possible in theory, but since Javascript is a client-side language, it can only know the time and date from the client’s local settings.

This fact rendered the client-side solution very impractical. What about time-zone differences? What if the clients clock is set wrong? How about daylight savings time? In reality, the client-side solution was not an option.

So what to do?

The solution

The only way to go about this problem was then to write a server-side script, run it on a different domain accessing one single source of time and date information (ie. this server’s own clock) and then inject the output into the client’s website using the front-end methods available to me.

That way, the information posted would appear correctly across all visitors regardless of their settings and time zone.

Using AJAX was not an option because of the Same Origin Policy preventing me to use something like jQuery’s load()-function. Also, the fact that the server running the client’s CMS itself was inaccessible to me ment that no proxy-script could be set up to circumvent the restriction.

What struck me, then, was that I had missed the most obvious solution, which was really lo-tech and simple. Embarrasingly simple, actually – as I had already spent so much time scratching my head and searching the web for a workaround to get this fancy AJAX-thing working …

First, here’s the PHP-script to generate the HTML string telling the visitor whether the hotline is open or closed:

<?php
 
header( "Content-type: application/x-javascript; charset=UTF-8" );
 
//Name of variable to output:
$nameOfVariable = "hotline_status";
 
//Strings to output:
$open = "<p class='$nameOfVariable'>The hotline is open!</p>";
$closed = "<p class='$nameOfVariable'>The hotline is closed!</p>";
 
//Opening hours (in 24-hour clock):
$weekday = array(
 'open' => 10,
 'close' => 17
);
 
$saturday = array(
 'open' => 10,
 'close' => 14
);
 
//Time zone adjustment. (If the server is in a different time zone than the hours configured above refer to):
$timeZoneAdjust = 1;
 
//Don't change these:
$now = time();
$daylightSavingsTime = date("I",$now);
$minutes = $now/60;
$minuteOfDay = $minutes % 1440;
$hourOfDay = abs(($minuteOfDay / 60)+$timeZoneAdjust) + $daylightSavingsTime;
$dayOfWeek = date("D",$now);
 
//Make the string:
echo "var $nameOfVariable = \"";
 
if ($dayOfWeek == "Sun") {
 //Sunday is hardcoded.
 echo $closed;
} elseif ($dayOfWeek == "Sat") {
 echo (($hourOfDay <= $saturday['open'] or $hourOfDay >= $saturday['close']) ? $closed : $open);
} else {
 echo (($hourOfDay <= $weekday['open'] or $hourOfDay >= $weekday['close']) ? $closed : $open);
}
 
echo "\";";
?>

Did you catch the trick?

The trick is to specify a php header like this:

header( "Content-type: application/x-javascript; charset=UTF-8" );

That way the script returns a javascript file.
This file contains a single variable holding the string that I want to inject into the DOM of my client’s website.

The result

On a normal weekday within hotline opening hours the output of the PHP file will look like this:

var hotline_status = "<p class='hotline_status'>The hotline is open!</p>";

I can then reference the PHP-file somewhere in the HTML of my client’s website (preferebly near the bottom for load speed reasons) like this:

<script type="text/javascript" src="http://path/to/php/file/"></script>;

Then I inject the content of the variable in the right place using jQuery:

$("div#hotline_status").append(hotline_status)

Voila!

Visitors now see if the hotline is open at the time of visiting the site.

(-:

Possibilities

And this is only a simple script.

You can use this method to apply all the bells and wistles of PHP (or your server-side language of choice) to your client’s ancient and closed source website – including database access, file reads, curls, etc.

Want to feed variables to your PHP script to condition an SQL-call?
No problem! Just append your variables to the filename of the referenced script (like scriptname.php?key=value) and use $_GET['key'] in the script to access them.

I guess you could even inject the script-tag itself on an event rather than on load, thus making user input possible, for instance on submitting a form. I haven’t tried this yet, though.

Of course, all of this wouldn’t be necessary at all in a perfect world where all clients have an open mind and understand the benefits of using non-proprietary, open-source CMS and e-commerce platforms.

But until that happens (which is never), little hacks like this are sometimes necessary to get the job done.

Hope you find it useful!