This post was last updated 10 years 1 month 8 days ago, some of the information contained here may no longer be actual and any referenced software versions may have been updated!

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.