Категории сайта


Полезные советы

Всплывающее окно с cookie на сайте DLE

Не знаю как у остальных администраторов сайтов и веб мастеров обходятся дела с cookie ? Но по нынешнему закону у всех сайтов, в которых присутствует регистрация, обязательно должна быть политика и согласие на сбор информации о пользователе. 

Конечно Вы можете это игнорировать (до поры) но все равно придется это сделать.. Если конечно не хотите заиметь штраф до 70000 т рублей.

Была история в 2016 с сайтом LinkedIn, его в то время заблокировали за нарушение  закона 152-ФЗ «О персональных данных»

У некоторых CMS , а именно в Вордпресс, я знаю есть специальный плагин для этого. Но в нашей системе DLE пока нет такого. 

Нет, конечно , есть возможность заказать специальный плагин для этого, решать Вам. 

Лично я себе выбрал вариант на чистом CSS и JS во всплывающем окне с кнопками согласия и политики. Идею подчерпнул с сайта Atuin

Создание и установка модального окна с  Cookie в DLE

Мы для начала создадим небольшой код HTML (который можете поместить в любое место на сайте или странице).

<div class="cookie_notice">
    Этот сайт использует файлы cookies и сервисы сбора технических данных посетителей (данные об IP-адресе, местоположении и др.) для обеспечения работоспособности и улучшения качества обслуживания. Продолжая использовать наш сайт, вы автоматически соглашаетесь с использованием данных технологий.
    <div>
        <a class="cookie_btn" id="cookie_close" href="#close">Согласиться</a>
        <a class="cookie_btn" href="#politika">Политика конфиденциальности</a>
    </div>
</div>

Далее нужно оформить стили у кнопок для согласия и кнопки с политикой. Вы можете использовать свои стили кнопок. 

.cookie_notice {
    display: none;
    position: fixed;
    z-index: 9999999;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 15px;
    font-family: Verdana, sans-serif;  
    color: #FFF;
    background: #337AB7;
    padding: 10px 20px; 
    border-top: 4px solid #BFE2FF;
}
/* Оформление кнопок */
.cookie_btn {
    display: inline-block;
    margin: 10px 6px 4px 6px;
    text-decoration: none;
    position: relative;
    font-size: 13px;
    padding: 4px 12px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase; 
    background: #337AB7;
    border: 2px solid #BFE2FF;
}
.cookie_btn:hover {
    color: #FFF;
}
.cookie_btn:after,
.cookie_btn:before {
    position: absolute;
    height: 2px;
    left: 50%;
    background: #FFF;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}
.cookie_btn:before {
    top: -6px;
}
.cookie_btn:hover:after,
.cookie_btn:hover:before {
    width: 100%;
    left: 0;
}

И остается прописать путь к выполняемому скрипту JS. Я уж не буду объяснять как это делать?!! Все надеюсь знакомы с подключением стилей и js файлов на сайте. На всякий случай я в архиве для скачивания вложу "памятку".

Вот сам код скрипта.

// функция возвращает cookie с именем name, если есть, если нет, то undefined    
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
let cookiecook = getCookie("cookiecook"),
cookiewin = document.getElementsByClassName('cookie_notice')[0];    
// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ
if (cookiecook != "no") {
    // показываем    
    cookiewin.style.display="block"; 
    // закрываем по клику
    document.getElementById("cookie_close").addEventListener("click", function(){
        cookiewin.style.display="none";    
        // записываем cookie на 1 день, с которой мы не показываем окно
        let date = new Date;
        date.setDate(date.getDate() + 1);    
        document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();               
    });
}

Если что то не получается, Вы всегда можете написать мне по любому из контактов на сайте.


Подписаться на новые новости
При изменении новости вы получите уведомление на E-mail.
Подписаться
Уже подписались: 4

СКАЧАТЬ

Обратная связь


Template not found: /templates/Maxs/feed.tpl


Пишите,спрашивайте
Вы уже собрались уходить? Очень жаль ... Могли бы посмотреть еще что нибудь !
+