Делаем уведомление об использовании cookie

[metrpro 42]

Следуя тенденциям времени, решил поставить себе на сайт уведомление об использовании cookie. Пока это требование установлено законодательством Евросоюза, но, говорят, добавляет кармы сайту в глазах поисков (посмотрим).

Решение состоит из двух частей - внешнего javascript-файла, который с завидной периодичностью (раз в 365 дней) уведомляет пользователя о том, что на сайте куки, и вызова этого скрипта.

1. Скрипт, ставится во внешний файл - у меня он лежит по адресу: /js/ck.js. Вот его текст:

(function (window, undefined){
	"use strict";
	var document = window.document;
	function log() {
		if (window.console && window.console.log) {
			for (var x in arguments) {
				if (arguments.hasOwnProperty(x)) {
					window.console.log(arguments[x]);
				}
			}
		}
	}
	function AcceptCookie() {
		if (!(this instanceof AcceptCookie)) {
			return new AcceptCookie();
		}
		this.init.call(this);
		return this;
	}
	AcceptCookie.prototype = {
		init: function () {
			var self = this;
			if(self.readCookie('pjAcceptCookie') == null)
			{
				self.appendCss();
				self.addCookieBar();
			}
			var clear_cookie_arr = self.getElementsByClass("pjClearCookie", null, "a");
			if(clear_cookie_arr.length > 0)
			{
				self.addEvent(clear_cookie_arr[0], "click", function (e) {
					if (e.preventDefault) {
						e.preventDefault();
					}
					self.eraseCookie('pjAcceptCookie');
					document.location.reload();
					return false;
				});
			}
		},
		getElementsByClass: function (searchClass, node, tag) {
			var classElements = new Array();
			if (node == null) {
				node = document;
			}
			if (tag == null) {
				tag = '*';
			}
			var els = node.getElementsByTagName(tag);
			var elsLen = els.length;
			var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
			for (var i = 0, j = 0; i < elsLen; i++) {
				if (pattern.test(els[i].className)) {
					classElements[j] = els[i];
					j++;
				}
			}
			return classElements;
		},
		addEvent: function (obj, type, fn) {
			if (obj.addEventListener) {
				obj.addEventListener(type, fn, false);
			} else if (obj.attachEvent) {
				obj["e" + type + fn] = fn;
				obj[type + fn] = function() { obj["e" + type + fn](window.event); };
				obj.attachEvent("on" + type, obj[type + fn]);
			} else {
				obj["on" + type] = obj["e" + type + fn];
			}
		},
		createCookie: function (name, value, days){
			var expires;
		    if (days) {
		        var date = new Date();
		        date.setTime(date.getTime()+(days*24*60*60*1000));
		        expires = "; expires="+date.toGMTString();
		    } else {
		        expires = "";
		    }
		    document.cookie = name+"="+value+expires+"; path=/";
		},
		readCookie: function (name) {
		    var nameEQ = name + "=";
		    var ca = document.cookie.split(';');
		    for(var i=0;i < ca.length;i++) {
		        var c = ca[i];
		        while (c.charAt(0) === ' ') {
		            c = c.substring(1,c.length);
		        }
		        if (c.indexOf(nameEQ) === 0) {
		            return c.substring(nameEQ.length,c.length);
		        }
		    }
		    return null;
		},
		eraseCookie: function (name) {
			var self = this;
			self.createCookie(name,"",-1);
		},
		appendCss: function()
		{
			var self = this;
			var cssId = 'pjAcceptCookieCss';
			if (!document.getElementById(cssId))
			{
			    var head  = document.getElementsByTagName('head')[0];
			    var link  = document.createElement('link');
			    link.id   = cssId;
			    link.rel  = 'stylesheet';
			    link.type = 'text/css';
			    link.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
			    link.media = 'all';
			    head.appendChild(link);
			}
			var cssCode = "";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn,";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:after { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }";
			cssCode += "#pjAcceptCookieBar { position: fixed; bottom: 0; left: 0; z-index: 9999; overflow-x: hidden; overflow-y: auto; width: 100%; max-height: 100%; padding: 10px 0; background: #3b3988; opacity: 0.8; font-family: 'Open Sans', sans-serif; text-align: center;}";
			cssCode += "#pjAcceptCookieBar * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarShell { width: 90%; margin: 0 auto; }";
			cssCode += "#pjAcceptCookieBar a[href^=tel] { color: inherit; }";
			cssCode += "#pjAcceptCookieBar a:focus,";
			cssCode += "#pjAcceptCookieBar button:focus { outline: unset; outline: none; }";
			cssCode += "#pjAcceptCookieBar p { font-size: 14px; line-height: 1.4; color: #fff; font-weight: 400; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarActions { padding-top: 10px; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn { position: relative; display: inline-block; height: 20px; padding: 0 30px; border: 0; background: #4285f4; opacity: 0.9; font-size: 14px; line-height: 14px; color: #fff; text-decoration: none; vertical-align: middle; cursor: pointer; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:hover,";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:focus { text-decoration: none; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:after { position: absolute; top: 0; right: 52%; bottom: 0; left: 52%; z-index: -1; border-bottom: 4px solid #14428d; background: rgba(20, 66, 141, .3); content: ''; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:hover:after,";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarBtn:focus:after { right: 0; left: 0; }";
			cssCode += "@media only screen and (max-width: 767px) {";
			cssCode += "#pjAcceptCookieBar { padding: 15px 0; }";
			cssCode += "#pjAcceptCookieBar .pjAcceptCookieBarShell { width: 96%; }";
			cssCode += "#pjAcceptCookieBar p { font-size: 14px; }";
			cssCode += "}";
			var styleElement = document.createElement("style");
			styleElement.type = "text/css";
			if (styleElement.styleSheet) {
			    styleElement.styleSheet.cssText = cssCode;
			} else {
				styleElement.appendChild(document.createTextNode(cssCode));
			}
			document.getElementsByTagName("head")[0].appendChild(styleElement);
		},
		addCookieBar: function(){
			var self = this;
			var htmlBar = '';
			htmlBar += '<div class="pjAcceptCookieBarShell"><form action="#" method="post">';
			htmlBar += '<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>';
			htmlBar += '<div class="pjAcceptCookieBarActions"><button type="button" class="pjAcceptCookieBarBtn">ОК</button></div></form></div>';
			var barDiv = document.createElement('div');
			barDiv.id = "pjAcceptCookieBar";
			document.body.appendChild(barDiv);
			barDiv.innerHTML = htmlBar;
			self.bindCookieBar();
		},
		bindCookieBar: function(){
			var self = this;
			var btn_arr = self.getElementsByClass("pjAcceptCookieBarBtn", null, "button");
			if(btn_arr.length > 0)
			{
				self.addEvent(btn_arr[0], "click", function (e) {
					if (e.preventDefault) {
						e.preventDefault();
					}
					self.createCookie('pjAcceptCookie', 'YES', 365);
					document.getElementById("pjAcceptCookieBar").remove();
					return false;
				});
			}
		}
	};
	window.AcceptCookie = AcceptCookie;
})(window);
window.onload = function() {AcceptCookie = AcceptCookie();}

2. В своем шаблоне (у меня Реалия) ищем файл main.tpl, лежит по адресу /template/frontend/realia/. Перед закрывающим тегом </body> вызываем внешний скрипт:

<script src="/js/ck.js"></script>

3. Получаем решение:

Все. Каждый пользователь ежегодно будет уведомляться о куках. 

PS: данное решение найдено на просторах интернета и немного адаптировано. Сам скрипт может быть ужат, но я не стал этого делать, т.к. работать с ним легче в таком форматировании.

PPS: кому не нравится полупрозрачность фона уведомления, уберите параметр opacity: 0.8;

 

 

[Stalker 0]

Привет, а можно сделать чтоб через сутки появлялось сообщение а не через год ?

[Дмитрий Кондин 690]

23 часа назад, Stalker сказал:

Привет, а можно сделать чтоб через сутки появлялось сообщение а не через год ?

В этой строчке

self.createCookie('pjAcceptCookie', 'YES', 365);

Замените 365 на 1