TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Popups – окно политики cookies

1 069

В связи с законом Евросоюза о cookies вступившим в силу в 2011 году, ICO (Information Commissioner’s Office) при создании сайта заточенного под европейского пользователя обязательным пунктом идет такой важный момент как создание оповещения о наличии cokies файлов на сайте. Для этого на сайтах под управлением CMS WordPress я использую плагин Popups в котором создаю специфическое окно соответствующее цели оповестить пользователя о наличии цокиес файлов. В итоге оно выглядит вот так:

Popups - окно политики cookies

Естественно что язык текста данного оповещения соответствует языку проекта который я делаю.

Я не утверждаю что предоставленный мной вариант popups окна является панацеей и в большинстве случаев, я уверен что данное окно придется переделывать что бы оно красиво отображалось на фоне темы сайта. Но мне верстки (которая на bootstrap 3) и стилей применяемых к данному окну вполне хватает.

Что ж присупим.

Импортируем Popups окно:

PopupsCokies.2018-01-25

Делаем это обычным образом, через стандартный импорт WordPress.

Настройки попап окна

Далее пройдитесь по настройкам попап окна, ниже я указал на основные из них

Popups - окно политики cookies

В Popaps окно добавляем стили указанные ниже:

/* * Add custom CSS for this popup * Be sure to start your rules with #spu-4356 { } and use !important when needed to override plugin rules */ div#spu-4949 i.spu-icon.spu-icon-close { display: none; } div#spu-4949 { margin: 0px !important; bottom: -18px !Important; } div#btn-group { margin-top: -16px!important; } button.btn.btn-outline-primary { font-family: 'Open Sans'; font-weight: 600; background-color: white; } button.btn.btn-outline-primary:hover { color: #f5f5f5; background-color: #002965; } @media screen and (max-width:991px){ div#btn-group { padding-top: 35px !important; } div#spu-4949 { padding: 0px; margin-bottom: -21px !important; } #btn-group > div:nth-child(2) { margin-bottom: -18px; } #btn-group > div:nth-child(1) { margin-top: -15px; margin-bottom: -15px; } } @media screen and (min-width:992px){ div#spu-4949 { padding: 0px; bottom: -17px !important; } } div#spu-4949 { margin: 0px !important; }

Соответственно стили (как и саму верстку переделываем под себя, если что-то с ними на Вашем проекте не так).

Теперь пропишим сценарий на jQuery для клика по кнопкам:

/*Das Popup-Fenster für die Cookies des EN*/ jQuery( document ).ready(function( $ ) { if ($('html:lang(ru)').length) { $('button.btn.btn-outline-primary.close-cookies-disclaimer-en').click(function(){ window.SPU.hide(4942); }); $('div#spu-bg-4942').click(function(){ return false }); } else if ($('html:lang(en)').length){ $('button.btn.btn-outline-primary.close-cookies-disclaimer-en').click(function(){ window.SPU.hide(8834); }); $('div#spu-bg-8834').click(function(){ return false }); } else if ($('html:lang(fr)').length){ $('button.btn.btn-outline-primary.close-cookies-disclaimer-en').click(function(){ window.SPU.hide(8835); }); $('div#spu-bg-8835').click(function(){ return false }); } });

На этом остается только добавить ссылку на страницу с дисклеймером и протестировать работу формы.

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее