Cookie consent notification in OpenCart

What is the Cookie law?

The Cookie Law is a privacy law directive, which was approved in May 2011 by the European Union and it effects all of the countries in the EU. The privacy law requires all website running and targeting users in countries part of the EU to ask for permission to store cookies in the browser or simply to notify the user that the website is using cookies.

You can read more about the directive on the European commission website - http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm

How can I make my website compliant?

This article will show you how to easily implement your own Cookie consent notification and make your website compliant with the European Union Cookie law. By default OpenCart is storing several types of cookies - Google Analytics, AddThis, the customer PHP Session ID and the language and currency preferences. This means that you can only notify the customer that the website is using cookies without actually asking for permission to store them on the browser.

The modification can be used in all versions of OpenCart running vQmod or installed via the extension installer in OpenCart 2.0 as an OCMod.

OpenCart 1.5

Let's start with the older versions first - OpenCart 1.5.6.4 and below. In order to perform modifications to files in OpenCart without overwriting them directly, we will be using vQmod. Make sure you have vQmod installed and working, you can follow this quick guide here on how to install vQmod - https://github.com/vqmod/vqmod/wiki/Installing-vQmod-on-OpenCart.

Open up your favourite text editor and create a new file called cookie_consent_notification.xml Insert the following code in the file and upload it to your /vqmod/xml directory.

<modification>
    <id>Cookie consent in OpenCart</id>
	<version>1.4.x and above</version>
	<vqmver>2.5.0</vqmver>
	<author>isenselabs.com</author>
	<file name="catalog/view/theme/*/template/common/footer.tpl">
		<operation error="skip">
			<search position="before"><![CDATA[</body>]]></search>
			<add><![CDATA[
				<style type="text/css">
					#cookie_consent_notification,
					#cookie_consent_notification *,
					#cookie_consent_notification *:before,
					#cookie_consent_notification *:after {
						font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
						font-weight: 300;
						font-size: 16px;
						line-height: 1.6;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
					}

					#cookie_consent_notification {
						position: fixed;
						top: 0;
						left: 0;
						right: auto;
						bottom: auto;
						margin: 0;
						padding: 12px 24px;
						color: white;
						background: rgba(0,0,0,.9);
						z-index: 999999;
						width: 100%;
						text-align: center;
						-webkit-transition: all ease-out 0.3s;  
						-moz-transition: all ease-out 0.3s;
						-ms-transition: all ease-out 0.3s; 
						-o-transition: all ease-out 0.3s;
						transition: all ease-out 0.3s;  
						-webkit-transform: translate3d(0,-100%,0);
						-moz-transform: translate3d(0,-100%,0);
						-ms-transform: translate3d(0,-100%,0);
						-o-transform: translate3d(0,-100%,0);
						transform: translate3d(0,-100%,0);
						-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
						backface-visibility: hidden;
					}

					#cookie_consent_notification.active {
						-webkit-transform: translate3d(0,0,0);
						-moz-transform: translate3d(0,0,0);
						-ms-transform: translate3d(0,0,0);
						-o-transform: translate3d(0,0,0);
						transform: translate3d(0,0,0);
					}

					#cookie_consent_notification .disable_cookie_consent_notification {
						display: inline-block;
						text-decoration: none;
						text-align: center;
						font-weight: bold;
						margin: 0 10px;
						padding: 0 6px;
						color: #32C0F4;
					}
				</style>
				<script type="text/javascript">
				(function($) {
					(function(g,f){"use strict";var h=function(e){if("object"!==typeof e.document)throw Error("Cookies.js requires a `window` with a `document` object");var b=function(a,d,c){return 1===arguments.length?b.get(a):b.set(a,d,c)};b._document=e.document;b._cacheKeyPrefix="cookey.";b._maxExpireDate=new Date("Fri, 31 Dec 9999 23:59:59 UTC");b.defaults={path:"/",secure:!1};b.get=function(a){b._cachedDocumentCookie!==b._document.cookie&&b._renewCache();return b._cache[b._cacheKeyPrefix+a]};b.set=function(a,d,c){c=b._getExtendedOptions(c); c.expires=b._getExpiresDate(d===f?-1:c.expires);b._document.cookie=b._generateCookieString(a,d,c);return b};b.expire=function(a,d){return b.set(a,f,d)};b._getExtendedOptions=function(a){return{path:a&&a.path||b.defaults.path,domain:a&&a.domain||b.defaults.domain,expires:a&&a.expires||b.defaults.expires,secure:a&&a.secure!==f?a.secure:b.defaults.secure}};b._isValidDate=function(a){return"[object Date]"===Object.prototype.toString.call(a)&&!isNaN(a.getTime())};b._getExpiresDate=function(a,d){d=d||new Date; "number"===typeof a?a=Infinity===a?b._maxExpireDate:new Date(d.getTime()+1E3*a):"string"===typeof a&&(a=new Date(a));if(a&&!b._isValidDate(a))throw Error("`expires` parameter cannot be converted to a valid Date instance");return a};b._generateCookieString=function(a,b,c){a=a.replace(/[^#$&+\^`|]/g,encodeURIComponent);a=a.replace(/\(/g,"%28").replace(/\)/g,"%29");b=(b+"").replace(/[^!#$&-+\--:<-\[\]-~]/g,encodeURIComponent);c=c||{};a=a+"="+b+(c.path?";path="+c.path:"");a+=c.domain?";domain="+c.domain: "";a+=c.expires?";expires="+c.expires.toUTCString():"";return a+=c.secure?";secure":""};b._getCacheFromString=function(a){var d={};a=a?a.split("; "):[];for(var c=0;c<a.length;c++){var e=b._getKeyValuePairFromCookieString(a[c]);d[b._cacheKeyPrefix+e.key]===f&&(d[b._cacheKeyPrefix+e.key]=e.value)}return d};b._getKeyValuePairFromCookieString=function(a){var b=a.indexOf("="),b=0>b?a.length:b;return{key:decodeURIComponent(a.substr(0,b)),value:decodeURIComponent(a.substr(b+1))}};b._renewCache=function(){b._cache= b._getCacheFromString(b._document.cookie);b._cachedDocumentCookie=b._document.cookie};b._areEnabled=function(){var a="1"===b.set("cookies.js",1).get("cookies.js");b.expire("cookies.js");return a};b.enabled=b._areEnabled();return b},e="object"===typeof g.document?h(g):h;"function"===typeof define&&define.amd?define(function(){return e}):"object"===typeof exports?("object"===typeof module&&"object"===typeof module.exports&&(exports=module.exports=e),exports.Cookies=e):g.Cookies=e})("undefined"===typeof window? this:window);

					$(document).ready(function($) {
						var show_notification = true;

						var html = '<div id="cookie_consent_notification">';
								html += 'This website uses cookies to improve your user experience.';
								html += '<a href="javascript:void(0);" class="disable_cookie_consent_notification">';
								html += 'Continue';
							html += '</a></div>';

						if (typeof Cookies == "undefined" || typeof Cookies != "function") {
							show_notification = false;
						} else if (typeof Cookies.get('disable_cookie_consent_notification') != "undefined" && Cookies.get('disable_cookie_consent_notification') == 'true') {
							show_notification = false;
						}

						if (show_notification) {
							$('body').append(html);
							$('#cookie_consent_notification').addClass('active');

							$('.disable_cookie_consent_notification').on('click', function(event) {
								event.preventDefault();
								$('#cookie_consent_notification').removeClass('active');
								Cookies.set('disable_cookie_consent_notification', 'true');
							});
						}
					});
				})(jQuery);
				</script>
			]]></add>
		</operation>
	</file>
</modification>

The above modification will add a notification bar to your website, which looks like this:

OpenCart 2.0

For stores running OpenCart 2.0 use the cookie_consent_notification.ocmod.xml OCMod, which you can download from our public repository at GitHub here https://github.com/iSenseLabs/tutorials/tree/master/cookie-consent-notification-in-opencart. After download the extension file you will need to install it using the OpenCart Extension Installer.

1. Open your OpenCart administration.
2. Navigate to Extensions -> Extension Installer.
3. Click on the Upload button and locate the downloaded cookie_consent_notification.ocmod.xml file.
4. OpenCart will install it automatically and you will get a success message.
5. Go to Extensions -> Modifications and click on the [Refresh] button.
6. That’s it!

Thank you for reading and hope that we've helped with this little tutorial!

If you have any questions regarding the modifications in the post, feel free to share them in the comments section below.

The full source code of this tutorial can be found at our public GitHub repository:

Download Source