You know sometimes you just want a quick solution to a problem and wherever you look there are just complex, overpriced scripts that make your simple problem sound like something that needs a lot of code and money to get to work.

I needed to display a cookie notification message on a wordpress and magento site, to avoid compatibility problems I wanted to avoid using jQuery and just do it as simply as possible in javascript.

After looking around at a lot of $10 jQuery solutions I found a free javascript only solution, modified it for Magento and WordPress and implemented it.

Download the code from Github here

Whatever your opinion of the EU Cookie Law which came into effect in 2012, sooner or later if you are in Europe you may need to show that you are doing something about it. Err actually it’s 2014, so I guess we are already a teeny weeny bit late.

From what I understand the law may differ in various countries (certainly outside Europe), so depending on where your website is, and who visits your site the law may or may not apply to you.

This script will let  you quickly implement a cookie notification banner with a link to your privacy policy. The notification itself uses cookies and will not be show again when closed.

You can implement this solution on any website by copying the install files to your web server and adding the following code to the footer of your site.

<script type=”text/javascript”>

var cookieNotificationURL='/cookies/';
var cookieNotificationLifetime=180;
var cookieNotificationMessage='This website uses cookies. For more information please ';
var cookieNotificationClickMessage='click here';
var cookieNotificationMessageFade=true;
var cookieNotificationPath='/path-to-install-folder/
</script>

<script type="text/javascript" src="/js/cookienotification/cookie.notification.min.js"></script>

This sets up some variables used by the script, the URL of the privacy info page, the lifetime of the cookie used by the script in days, messages displayed, the option to fade the message automatically and the path to the install folder – used to display the close image.

For wordpress simply paste this into the footer php file of your theme.

For Magento paste this into the footer.phtml template file of your Magento theme. You can translate the messages, and perhaps a good idea, choose to display the message only on non SSL pages – we don’t want this javascript to somehow screw up a sale!

<?php if (empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] = ‘off’): ?>

<!-- Cookie Notification -->
<script type="text/javascript">
var cookieNotificationURL='/datenschutzerklaerung/';
var cookieNotificationLifetime=180;

<?php if (Mage::app()->getStore()->getId()==2): ?>
var cookieNotificationMessage='This website uses cookies. For more information please ';
var cookieNotificationClickMessage='click here';
<?php else: ?>
var cookieNotificationMessage='Diese Website verwendet Cookies. ';
var cookieNotificationClickMessage='Klicken Sie hier für weitere Informationen.';
<?php endif ?>
</script>

<script type="text/javascript" src="/js/cookienotification/cookie.notification.js"></script>
<?php endif ?>

Here I am manually checking the store id and translating the text to German. Remember to refresh your Magento cache after editing and saving the footer template file.

You can see the code working on this WordPress blog below, and also with Magento on my Magento development site.

Tested with Magento 1.8.x, WordPress 3.blah, Chrome, Firefox, IE11. Detects mobile devices and modifies banner size accordingly.

Getting WordPress to work well with multi language content isn’t so straight forward, there are a lot of plugins available that offer multi language solutions but these seemed to be over complex for what I wanted.

My WordPress marketing sites are relatively simple with just a few pages used as marketing landing pages and stepping stones to e-commerce sites. I already created a simple method in PHP of detecting browser language and matching language to content in my pages however the WordPress frontend language remained in the default language of the installation. I did not want to modify core template files within WordPress as this makes upgrading difficult so after wasting time with Plugins I developed a very simple solution that sets the WordPress interface language for each visitor based on their browser language.

The WordPress WP-CONFIG.php file holds the main configuration settings for your WordPress installation, a global PHP constant WPLANG is defined here that sets the admin and frontend interface language using standard country and language codes, the default if WPLANG is not specified is American English en-US.

WordPress language packs come in .mo files that are located in the WordPress wp-content/languages folder, they are named after the language code, i.e. en_US.mo, de_DE.mo etc.

By detecting the browser language of the visitor and then checking if a corresponding .mo file exists in the languages folder we can automatically switch the WordPress interface language to match the visitors browser language – nice!

Decide which languages you want to support and download the corresponding .mo files, you can find all the language files available in the WordPress language file repository here http://svn.automattic.com/wordpress-i18n/ e.g. here are the German language files http://svn.automattic.com/wordpress-i18n/de_DE/branches/2.8/messages/

If your WordPress site does not have a wp-content/languages folder, create a new one and copy your language files into it. Note you should copy your default language file too.

Now edit the WP-CONFIG.php file in the root folder of your WordPress installation and find the WP-LANG constant definition and comment it out:

#define (‘WPLANG’, ”);

and below it paste in the following code

/**
 * Set language and load language files
 */
function detectlanguage() {
    $langcode = explode(";", $_SERVER['HTTP_ACCEPT_LANGUAGE']);
    $langcode = explode(",", $langcode['0']);
    return $langcode['0'];
    }

function fileExists($fileName, $caseSensitive = true) {

    if(file_exists($fileName)) {
        return $fileName;
    }
    if($caseSensitive) return false;

    // Handle case insensitive requests            
    $directoryName = dirname($fileName);
    $fileArray = glob($directoryName . '/*', GLOB_NOSORT);
    $fileNameLowerCase = strtolower($fileName);
    foreach($fileArray as $file) {
        if(strtolower($file) == $fileNameLowerCase) {
            return $file;
        }
    }
    return false;
}	

$languageDefault='en_US';
$language = detectlanguage();

if (isset($_GET['set_lang'])) { $language = $_GET['set_lang']; }

$languageFile= 'wp-content/languages/'. str_replace('-','_',$language). '.mo';
$wpLanguageFile=fileExists($languageFile,false);

// check if WP language file exists for browser language
if ($wpLanguageFile) {
	$wpLanguageFile = basename($wpLanguageFile, '.mo');
	// language supported
	define ('WPLANG', $wpLanguageFile);
    //echo "Language - $language detected. Language file exists and is supported."; 
} else {
	// language not supported default to EN
    //echo "Language - $language detected. Language file does not exist - defaulting to $languageDefault."; 
	define ('WPLANG', $languageDefault);
}

Save the file and test. You can force the language selection by specifying it in the URL, i.e. http://yourwordpresssite.com/?set_lang=de_DE which will force the interface language to German if you have the German language files installed. Uncomment the echo’s and you will see the language selection confirmed.

If all is working well the WordPress interface language will now switch to the browser language of your visitors.

Note that this will only change the language of the built in WordPress interface in the frontend or backend. Your content language will not change, you need to create a translation system for your content using portable object files, or alternatively use the Google translation tool.