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

Nektov · 31 октября 2022

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

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

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

создал файл 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>

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

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

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

Хелп..

master27 · 1 ноября 2022

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

stimul992 · 1 ноября 2022

я поступил проще купил модуль и все 1 бакс вот ссылка (это не реклама)

Nektov · 1 ноября 2022

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

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

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

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

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

kamensk · 1 ноября 2022

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

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

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

Nektov · 1 ноября 2022

1 час назад, kamensk сказал:

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

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

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

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

Цитата

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

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

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

Цитата

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

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

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

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

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

Captain · 2 ноября 2022

https://dle-news.ru/blog/1728-informaciya-o-federalnom-zakone-nomer-152.html

https://dle-news.ru/privacy.html

celsoft · 2 ноября 2022

10 часов назад, Nektov сказал:

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

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

Nektov · 3 ноября 2022

И так, кому нужна кнопка предупреждением об обработке 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

Изменено 3 ноября 2022 пользователем Nektov

Nektov · 7 ноября 2022

Забыл выложить 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;
}

Войти

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

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

Nektov 59

Ссылка на сообщение

Поделиться на других сайтах

master27 38

Ссылка на сообщение

Поделиться на других сайтах

stimul992 6

Ссылка на сообщение

Поделиться на других сайтах

Nektov 59

Ссылка на сообщение

Поделиться на других сайтах

kamensk 86

Ссылка на сообщение

Поделиться на других сайтах

Nektov 59

Ссылка на сообщение

Поделиться на других сайтах

Captain 625

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 088

Ссылка на сообщение

Поделиться на других сайтах

Nektov 59

Ссылка на сообщение

Поделиться на других сайтах

Nektov 59

Ссылка на сообщение

Поделиться на других сайтах

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

Форум

Активность