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

Последнее обновление Ноя 29, 2024

Содержание

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

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

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

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

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

PopupsCokies.2018-01-25

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

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

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

В 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