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

Всплывающее уведомление о cookies

ks95

Автор: ks95,
в DataLife Engine (Общие вопросы)

 Рассказать Подписчики 1

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

ks95

ks95 2

Опубликовано:
Опубликовано:

сайт konoplev.net

Есть ли готовое решение, как по-простому реализовать всплывающее уведомление об использовании куков, как сделано на многих сайтах?

В этой теме -

есть  какое-то объяснение, но, честно, не понял, что куда вставлять. Больше ничего не нашёл.

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

mr.0xE9 0

Опубликовано:
Опубликовано: (изменено)

Лучше выносите в  

{include file="modules/cookie-consent.tpl"}

а именно создайте каталог modules в вашей теме и в данном каталоге файл cookie-consent.tpl со следующим содержимым: 

<!-- Cookie Notice (notice-only) -->
<div id="cookie-notice" class="cookie-notice" role="region" aria-label="Сообщение о cookies" hidden>
  <div class="cn-inner" role="dialog" aria-modal="true" aria-labelledby="cn-title" aria-describedby="cn-desc">
    <div class="cn-text">
      <h2 id="cn-title">Мы используем cookies</h2>
      <p id="cn-desc">
        Используем только технически необходимые cookies, без аналитики и рекламы.
        Подробнее — <a href="/privacy" target="_blank" rel="noopener">Политика конфиденциальности</a>.
      </p>
    </div>
    <div class="cn-actions">
      <button class="cn-btn" id="cn-ok">Ок</button>
    </div>
  </div>
</div>

<style>
:root{
  --cn-bg:#121212; --cn-fg:#fff; --cn-accent:#50c878; --cn-outline:#2a3a38; --cn-radius:14px;
  --cn-shadow:0 10px 30px rgba(0,0,0,.18)
}
.cookie-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;
  max-width:860px;width:clamp(300px,92vw,860px)}
.cn-inner{display:grid;gap:14px;background:var(--cn-bg);color:var(--cn-fg);border-radius:var(--cn-radius);
  box-shadow:var(--cn-shadow);padding:18px;border:1px solid var(--cn-outline)}
.cn-text h2{margin:0 0 6px;font-size:18px}
.cn-text p{margin:0;color:#e9f3f0}
.cn-text a{color:#ffd54a}
.cn-actions{display:flex;gap:10px;justify-content:flex-end}
.cn-btn{background:var(--cn-accent);color:#0f1c18;border:none;border-radius:10px;padding:10px 16px;
  font-weight:700;cursor:pointer}
.cookie-notice[hidden]{display:none}
@media (min-width:640px){ .cn-inner{grid-template-columns:1fr auto;align-items:center} }
</style>

<script>
(function(){
  const KEY = "cookieNotice.noticeOnly.v1";
  const banner = document.getElementById("cookie-notice");
  const okBtn  = document.getElementById("cn-ok");

  document.addEventListener("DOMContentLoaded", () => {
    if (!localStorage.getItem(KEY)) banner.hidden = false;
    okBtn.addEventListener("click", () => {
      localStorage.setItem(KEY, String(Date.now()));
      banner.hidden = true;
    });
  });
})();
</script>

В файле main.tpl выведите:
  

{include file="modules/cookie-consent.tpl"}


Важно: этот вариант используется только если:

  • У вас нет Google Analytics Метрики и т.д

  • Не стоят какие-либо сервисы, которые ставят свои куки.

  • Остаются лишь «строго необходимые» (сессия DLE, корзина и т.п.).

Изменено пользователем mr.0xE9
Добавлен код
Ссылка на сообщение
Поделиться на других сайтах
germanydletest

germanydletest 459

Опубликовано:
Опубликовано:
3 минуты назад, mr.0xE9 сказал:

Версия DLE у вас какая? 

А зачем Вам знать версию DLE? Если это делается на JS и вообще пофиг какая CMS у Вас, не говоря уже о версии.

 

2 часа назад, ks95 сказал:

что куда вставлять

В данном сообщении всё подробно описано, файлы можно скачать здесь если не хотите/не можете скопировать из сообщений. Стили и скрипт подключаете в файле Вашего шаблона main.tpl например между тегами head, например 

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

а данный js код 

<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>

вставляете между тегами body 

<body>
  
</body>

 

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

ks95 2

Опубликовано:
Опубликовано: (изменено) Автор

Спасибо за поддержку!

26 минут назад, germanydletest сказал:

файлы можно скачать здесь если не хотите/не можете скопировать из сообщений

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

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

germanydletest 459

Опубликовано:
Опубликовано:
22 минуты назад, ks95 сказал:

Как скачать там файлы, не понял.

Ссылка на скачивание https://github.com/ketanmistry/ihavecookies/archive/refs/heads/master.zip

 

22 минуты назад, ks95 сказал:

А что с файлами делать дальше?

Разложить их по папкам Вашего шаблона, например css файл в папку /templates/Blue/css/, а js файл в папку /templates/Blue/js/, и затем в main.tpl между тегами head подключать их так: 

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

 

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

ks95 2

Опубликовано:
Опубликовано: Автор
25 минут назад, germanydletest сказал:

Ссылка на скачивание https://github.com/ketanmistry/ihavecookies/archive/refs/heads/master.zip

 

Разложить их по папкам Вашего шаблона, например css файл в папку /templates/Blue/css/, а js файл в папку /templates/Blue/js/, и затем в main.tpl между тегами head подключать их так: 


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

 

Спасибо!!

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

ks95 2

Опубликовано:
Опубликовано: Автор
23 часа назад, germanydletest сказал:

Разложить их по папкам

Кажется, всё получилось, весь вечер провозился. Как-нибудь ещё до стилей доберусь, чтобы сочеталось.

Огромное спасибо за помощь!

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

kamensk 91

Опубликовано:
Опубликовано:

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

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

ks95 2

Опубликовано:
Опубликовано: Автор
12 часов назад, kamensk сказал:

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

Возможно, впереди. Главное, по сути проблема решена.

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Рассказать
Подписчики 1
Перейти к списку тем
×
×
  • Создать...