Перейти к публикации

Помогите поставить кнопку о Cookies


Рекомендованные сообщения

Помогите поставить кнопку о Cookies

Уже весь измучился, а она не встает, хоть тресни.

Пример брал отсюда, отсюда и отсюда. Сейчас пытаюсь настроить вариант с первого примера...

Да, сайт PrayBook.info

Делал все ка указано в примере:

создал файл cookie_button.js

function checkCookies(){
    let cookieDate = localStorage.getItem('cookieDate');
    let cookieNotification = document.getElementById('cookie_notification');
    let cookieBtn = cookieNotification.querySelector('.cookie_accept');
    if( !cookieDate || (+cookieDate + 86400) < Date.now() ){
        cookieNotification.classList.add('show');
    }

    cookieBtn.addEventListener('click', function(){
        localStorage.setItem( 'cookieDate', Date.now() );
        cookieNotification.classList.remove('show');
    })
}
checkCookies();

 

В стили шаблона сайта добавил

.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;
}

В main.tpl добавил

<div class="cookie_notice">
    Сайт PrayBook.info в своей работе использует файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.
    <div>
        <a class="cookie_btn" id="cookie_close" href="#close">Хорошо</a>
    </div>
</div>
<script async type="text/javascript" src="/templates/light/js/cookie_button.js"></script>

А оно не работает.

Точнее надпись и кнопка выводятся но не работаю.

 

Чувствую, что где-то какую что мелочь пропустил, а вот где....

 

Хелп..

Ссылка на сообщение
Поделиться на других сайтах

Всё у Вас в вперемешку.
Стили с третьего варианта возьмите + код перед закрывающим "</body>"

<div id="cookie_notification">
	<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>
	<button class="button cookie_accept">Принять</button>
</div>
<script>
	function checkCookies(){
		let cookieDate = localStorage.getItem('cookieDate');
		let cookieNotification = document.getElementById('cookie_notification');
		let cookieBtn = cookieNotification.querySelector('.cookie_accept');
		// Если записи про кукисы нет или она просрочена на 1 год, то показываем информацию про кукисы
		if( !cookieDate || (+cookieDate + 31536000000) < Date.now() ){
			cookieNotification.classList.add('show');
		}
		// При клике на кнопку, в локальное хранилище записывается текущая дата в системе UNIX
		cookieBtn.addEventListener('click', function(){
			localStorage.setItem( 'cookieDate', Date.now() );
			cookieNotification.classList.remove('show');
		})
	}
	checkCookies();
</script>

 

Ссылка на сообщение
Поделиться на других сайтах

Спасибо большое master27, все получилось, надпись и кнопка работают.

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

И, соответственно вспомнил, что при заходе на сайт dle-news.ru, такое (согласие с выбором чем делится) уже реализовано.

Соответственно хочу попросить ув. Celsoft поделиться способом реализации.

 

И неплохо было бы впихнуть возможность настройки (включение/отключение и т.д.) согласия на обработку печенек в админ настройки скрипта.

 

Ссылка на сообщение
Поделиться на других сайтах

Нафига эта лабуда с куками?  Есть какие то требования?

Это, как я понимаю - всего лишь рекомендации.

Нафига эта кнопка, поясните?

Ссылка на сообщение
Поделиться на других сайтах
1 час назад, kamensk сказал:

Нафига эта лабуда с куками?  Есть какие то требования?

Это, как я понимаю - всего лишь рекомендации.

Нафига эта кнопка, поясните?

Google снова оштрафовали за нарушение правил использования файлов cookie 

Цитата

Французская комиссия по информатике и гражданским свободам (CNIL) оштрафовала компанию Google, входящую в холдинг Alphabet, на рекордные 150 млн евро за нарушение правил использования файлов cookie. Компания Meta Platforms, которой принадлежит Facebook, была оштрафована на 60 миллионов евро по той же причине.

Предварительное согласие пользователей Интернета на использование файлов cookie, которые помогают создавать целевые цифровые рекламные кампании, занимает важное место в требованиях ЕС по части конфиденциальности данных.

 

Стаття 188-39 КУпАП

Цитата

Недодержання встановленого законодавством про захист персональних даних порядку захисту персональних даних, що призвело до незаконного доступу до них або порушення прав суб’єкта персональних даних, -

тягне за собою накладення штрафу на громадян від ста до п’ятисот неоподатковуваних мінімумів доходів громадян і на посадових осіб, громадян - суб’єктів підприємницької діяльності - від трьохсот до однієї тисячі неоподатковуваних мінімумів доходів громадян.

Повторне протягом року вчинення порушення, передбаченого частиною четвертою цієї статті, за яке особу вже було піддано адміністративному стягненню, -

тягне за собою накладення штрафу від однієї тисячі до двох тисяч неоподатковуваних мінімумів доходів громадян.

В РФ думаю тоже есть ответственность.

Ссылка на сообщение
Поделиться на других сайтах
10 часов назад, Nektov сказал:

И, соответственно вспомнил, что при заходе на сайт dle-news.ru, такое (согласие с выбором чем делится) уже реализовано.

DLE не использует никакие куки кроме базовых, если вы какие то отдельные маркетинговые куки используете то тогда уже нужно давать выбор и не использовать если их запретили. А JS скриптов для реализации полно, например на нашем сайте это https://github.com/ketanmistry/ihavecookies 

Ссылка на сообщение
Поделиться на других сайтах

И так, кому нужна кнопка предупреждением об обработке cookie с возможностью выбора.

В шапку main.tpl

<script type="text/javascript" src="jquery.ihavecookies.js"></script>
<link href="example.css" rel="stylesheet">

В тело main.tpl (можно тоже в шапку)

<script type="text/javascript">
    var options = {
        title: '&#x1F36A; Файлы cookie и политика конфиденциальности.',
        message: 'Сайт использует идентификационные файлы cookies для хранения информации.',
        delay: 600,
        expires: 1,
        link: '/privacy-policy-and-use-of-cookies.html',
        onAccept: function(){
            var myPreferences = $.fn.ihavecookies.cookie();
            console.log('Настройки были сохранены...');
            console.log(myPreferences);
        },
        uncheckBoxes: true,
        acceptBtnLabel: 'Принять',
        moreInfoLabel: 'Больше информации',
        cookieTypesTitle: 'Выберите, какие файлы cookie вы хотите принять',
        fixedCookieTypeLabel: 'Необходимые',
        fixedCookieTypeDesc: 'Необходимы для корректной работы сайта.'
    }

    $(document).ready(function() {
        $('body').ihavecookies(options);

        if ($.fn.ihavecookies.preference('marketing') === true) {
            console.log('Это должно быть включено.');
        }

        $('#ihavecookiesBtn').on('click', function(){
            $('body').ihavecookies(options, 'reinit');
        });
    });

    </script>

Сам jquery.icookies.js

/*!
 * ihavecookies - jQuery plugin for displaying cookie/privacy message
 * v0.3.2
 *
 * Copyright (c) 2018 Ketan Mistry (https://iamketan.com.au)
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
(function($) {

    /*
    |--------------------------------------------------------------------------
    | Cookie Message
    |--------------------------------------------------------------------------
    |
    | Displays the cookie message on first visit or 30 days after their
    | last visit.
    |
    | @param event - 'reinit' to reopen the cookie message
    |
    */
    $.fn.ihavecookies = function(options, event) {

        var $element = $(this);

        // Set defaults
        var settings = $.extend({
            cookieTypes: [
                {
                    type: 'Настройки сайта',
                    value: 'preferences',
                    description: 'Это файлы cookie, которые связаны с вашими предпочтениями на сайте, например. запоминание вашего имени пользователя, цветов сайта и т. д.'
                },
                {
                    type: 'Аналитика',
                    value: 'analytics',
                    description: 'Аналитические файлы cookie, связанные с посещениями сайта, типами браузеров и т. д.'
                },
                {
                    type: 'Социальные',
                    value: 'marketing',
                    description: 'Файлы cookie, связанные с социальными сетями, например. рассылки, социальные сети и т. д.'
                }
            ],
            title: '&#x1F36A; Файлы cookie и политика конфиденциальности.',
            message: 'Файлы cookie позволяют персонализировать ваш опыт на наших сайтах, сообщают нам, какие разделы наших веб-сайтов посещали люди, помогают нам измерять эффективность и веб-поиска, а также дают нам представление о поведении пользователей, чтобы мы могли улучшить нашу работу. коммуникации и продукты.',
            link: '/privacy-policy-and-use-of-cookies.html',
            delay: 2000,
            expires: 30,
            moreInfoLabel: 'Больше информации',
            acceptBtnLabel: 'Принять',
            advancedBtnLabel: 'Настроить сookies',
            cookieTypesTitle: 'Выберите, какие файлы cookie вы хотите принять',
            fixedCookieTypeLabel:'Необходимые',
            fixedCookieTypeDesc: 'Необходимы для корректной работы сайта.',
            onAccept: function(){},
            uncheckBoxes: false
        }, options);

        var myCookie = getCookie('cookieControl');
        var myCookiePrefs = getCookie('cookieControlPrefs');
        if (!myCookie || !myCookiePrefs || event == 'reinit') {
            // Remove all instances of the cookie message so it's not duplicated
            $('#gdpr-cookie-message').remove();

            // Set the 'necessary' cookie type checkbox which can not be unchecked
            var cookieTypes = '<li><input type="checkbox" name="gdpr[]" value="necessary" checked="checked" disabled="disabled"> <label title="' + settings.fixedCookieTypeDesc + '">' + settings.fixedCookieTypeLabel + '</label></li>';

            // Generate list of cookie type checkboxes
            preferences = JSON.parse(myCookiePrefs);
            $.each(settings.cookieTypes, function(index, field) {
                if (field.type !== '' && field.value !== '') {
                    var cookieTypeDescription = '';
                    if (field.description !== false) {
                        cookieTypeDescription = ' title="' + field.description + '"';
                    }
                    cookieTypes += '<li><input type="checkbox" id="gdpr-cookietype-' + field.value + '" name="gdpr[]" value="' + field.value + '" data-auto="on"> <label for="gdpr-cookietype-' + field.value + '"' + cookieTypeDescription + '>' + field.type + '</label></li>';
                }
            });

            // Display cookie message on page
            var cookieMessage = '<div id="gdpr-cookie-message"><h4>' + settings.title + '</h4><p>' + settings.message + ' <a href="' + settings.link + '">' + settings.moreInfoLabel + '</a><div id="gdpr-cookie-types" style="display:none;"><h5>' + settings.cookieTypesTitle + '</h5><ul>' + cookieTypes + '</ul></div><p><button id="gdpr-cookie-accept" type="button">' + settings.acceptBtnLabel + '</button><button id="gdpr-cookie-advanced" type="button">' + settings.advancedBtnLabel + '</button></p></div>';
            setTimeout(function(){
                $($element).append(cookieMessage);
                $('#gdpr-cookie-message').hide().fadeIn('slow', function(){
                    // If reinit'ing, open the advanced section of message
                    // and re-check all previously selected options.
                    if (event == 'reinit') {
                        $('#gdpr-cookie-advanced').trigger('click');
                        $.each(preferences, function(index, field) {
                            $('input#gdpr-cookietype-' + field).prop('checked', true);
                        });
                    }
                });
            }, settings.delay);

            // When accept button is clicked drop cookie
            $('body').on('click','#gdpr-cookie-accept', function(){
                // Set cookie
                dropCookie(true, settings.expires);

                // If 'data-auto' is set to ON, tick all checkboxes because
                // the user hasn't clicked the customise cookies button
                $('input[name="gdpr[]"][data-auto="on"]').prop('checked', true);

                // Save users cookie preferences (in a cookie!)
                var prefs = [];
                $.each($('input[name="gdpr[]"]').serializeArray(), function(i, field){
                    prefs.push(field.value);
                });
                setCookie('cookieControlPrefs', encodeURIComponent(JSON.stringify(prefs)), 365);

                // Run callback function
                settings.onAccept.call(this);
            });

            // Toggle advanced cookie options
            $('body').on('click', '#gdpr-cookie-advanced', function(){
                // Uncheck all checkboxes except for the disabled 'necessary'
                // one and set 'data-auto' to OFF for all. The user can now
                // select the cookies they want to accept.
                $('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'on').prop('checked', true);
                $('#gdpr-cookie-types').slideDown('fast', function(){
                    $('#gdpr-cookie-advanced').prop('disabled', true);
                });
            });

        } else {
            var cookieVal = true;
            if (myCookie == 'false') {
                cookieVal = false;
            }
            dropCookie(cookieVal, settings.expires);
        }

        // Uncheck any checkboxes on page load
        if (settings.uncheckBoxes === true) {
            $('input[type="checkbox"].ihavecookies').prop('checked', false);
        }

    };

    // Method to get cookie value
    $.fn.ihavecookies.cookie = function() {
        var preferences = getCookie('cookieControlPrefs');
        return JSON.parse(preferences);
    };

    // Method to check if user cookie preference exists
    $.fn.ihavecookies.preference = function(cookieTypeValue) {
        var control = getCookie('cookieControl');
        var preferences = getCookie('cookieControlPrefs');
        preferences = JSON.parse(preferences);
        if (control === false) {
            return false;
        }
        if (preferences === false || preferences.indexOf(cookieTypeValue) === -1) {
            return false;
        }
        return true;
    };

    /*
    |--------------------------------------------------------------------------
    | Drop Cookie
    |--------------------------------------------------------------------------
    |
    | Function to drop the cookie with a boolean value of true.
    |
    */
    var dropCookie = function(value, expiryDays) {
        setCookie('cookieControl', value, expiryDays);
        $('#gdpr-cookie-message').fadeOut('fast', function() {
            $(this).remove();
        });
    };

    /*
    |--------------------------------------------------------------------------
    | Set Cookie
    |--------------------------------------------------------------------------
    |
    | Sets cookie with 'name' and value of 'value' for 'expiry_days'.
    |
    */
    var setCookie = function(name, value, expiry_days) {
        var d = new Date();
        d.setTime(d.getTime() + (expiry_days*24*60*60*1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
        return getCookie(name);
    };

    /*
    |--------------------------------------------------------------------------
    | Get Cookie
    |--------------------------------------------------------------------------
    |
    | Gets cookie called 'name'.
    |
    */
    var getCookie = function(name) {
        var cookie_name = name + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(cookie_name) === 0) {
                return c.substring(cookie_name.length, c.length);
            }
        }
        return false;
    };

}(jQuery));

Если нужно отключить авто проставление галочек меняем 123 строку в jquery.icookies.js

$('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'on').prop('checked', true);

на

$('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false);

 

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

 

Взято отсюда

За пинок в нужную сторону большое мерси ув. Celsoft

Изменено пользователем Nektov
Ссылка на сообщение
Поделиться на других сайтах

Забыл выложить CSS

/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    left: 5px;
    bottom: 5px;
    max-width: 280px;
    background-color: #3B3646;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.25);
    margin-left: 5px;
    font-family: system-ui;
}
#gdpr-cookie-message h4 {
    color: #EE4B5A;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
#gdpr-cookie-message h5 {
    color: #EE4B5A;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
    color: white;
    font-size: 15px;
    line-height: 1.5em;
}
#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
    text-align: right;
}
#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
}
#gdpr-cookie-message a {
    color: #EE4B5A;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255,255,255,0.75);
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message a:hover {
    color: white;
    border-bottom-color: #EE4B5A;
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    border: none;
    background: #EE4B5A;
    color: white;
    font-size: 15px;
    padding: 7px;
    border-radius: 3px;
    margin-left: 15px;
    cursor: pointer;
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:hover {
    background: white;
    color: #EE4B5A;
    transition: all 0.3s ease-in;
}
button#gdpr-cookie-advanced {
    background: white;
    color: #EE4B5A;
}
#gdpr-cookie-message button:disabled {
    opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}

 

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...