Следуя тенденциям времени, решил поставить себе на сайт уведомление об использовании 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;
Автор: metrpro
Автор: mykvartira
