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

ks95 · 2 часа назад

сайт konoplev.net

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

В этой теме -

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

mr.0xE9 · 29 минут назад

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

{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, корзина и т.п.).

Изменено 14 минут назад пользователем mr.0xE9
Добавлен код

germanydletest · 11 минут назад

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>

Войти

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

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

ks95 2

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

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

mr.0xE9 0

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

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

germanydletest 458

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

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

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

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

Войти

Форум

Активность