Куки-баннер по-быстрому — Разработка на vc.ru

Для приведения сайтов в соответствие с обновленным законом о персональных данных внедрил куки-баннер, один на все сайты. Вот, делюсь кодом.

Баннер совместим с Bootstrap 5 и почти совместим с Bootstrap 4 (нужно только скопировать стили для .fixed-bottom и явным образом задать цвет бэкграунда).

Судя по различным источникам, реальных манипуляций с куками в зависимости от ответа пользователя делать не нужно, во всяком случае пока. Хранить в табличке каждый факт пользовательского согласия с возможностью отозвать — тоже. Так что баннер просто рассказывает, что у нас тут на сайте куки есть, и по кнопке «Согласен» сохраняет факт нажатия в куку. Что позволяет еще год не показывать этот баннер. Ну и ссылку на политику обработки персональных данных даёт.

Выглядит примерно вот так:

Код почти целиком написан чатом жопотэ — сейчас бы еще самому кодить во имя такой благородной цели. Так что я лишь внес одно небольшое уточнение. Для использования нужно вкрутить в html вот этот код баннера:

<div id="cookieConsentWrapper" class="fixed-bottom w-100"> <div class="cookie-content-wrapper"> <div id="cookieConsent" class="cookie-consent-container bg-light"> <div class="cookie-content"> <div class="cookie-text"> <p class="mb-0"> На нашем сайте используются куки-файлы, потому что без них всё плохо работает. А с ними — хорошо. Нажмите на кнопку «Согласен», если согласны с <a href="/privacy-policy">условиями обработки куки и данных</a> на сайте. Если не согласны, можете отключить куки в настройках браузера. </p> </div> <div> <button id="cookieConsentBtn" class="btn btn-primary">Согласен</button> </div> </div> </div> </div> </div>

Добавить JS-код для определения показа и отработки скрытия баннера, а также работы с куками:

// Cookie dialog document.addEventListener('DOMContentLoaded', function () { const cookieConsentWrapper = document.getElementById('cookieConsentWrapper'); const cookieConsent = document.getElementById('cookieConsent'); const cookieConsentBtn = document.getElementById('cookieConsentBtn'); if (!getCookie('cookieConsent')) { setTimeout(() => { cookieConsent.classList.add('show'); }, 500); } else { cookieConsentWrapper.style.display = 'none'; } cookieConsentBtn.addEventListener('click', function () { // Устанавливаем cookie на 365 дней setCookie('cookieConsent', 'true', 365); cookieConsent.classList.remove('show'); setTimeout(() => { cookieConsentWrapper.style.display = 'none'; }, 500); }); // Функция для установки cookie function setCookie(name, value, days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } // Функция для получения cookie function getCookie(name) { const cookieName = name + "="; const decodedCookie = decodeURIComponent(document.cookie); const cookieArray = decodedCookie.split(';'); for (let i = 0; i < cookieArray.length; i++) { let cookie = cookieArray[i]; while (cookie.charAt(0) === ' ') { cookie = cookie.substring(1); } if (cookie.indexOf(cookieName) === 0) { return cookie.substring(cookieName.length, cookie.length); } } return ""; } });

И добавить к стилям вот этот сниппет для оформления баннера:

/* Cookie consent */ .cookie-consent-container { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); border-radius: 8px 8px 0 0; transform: translateY(100%); opacity: 0; transition: transform 0.4s ease-out, opacity 0.4s ease-out; } .cookie-consent-container.show { transform: translateY(0); opacity: 1; } .cookie-content-wrapper { max-width: 900px; margin: 0 auto; padding: 0 15px; } .cookie-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; margin-left: 20px; margin-right: 20px; } .cookie-text { flex: 1; padding-right: 30px; } @media (max-width: 768px) { .cookie-content { flex-direction: column; text-align: center; } .cookie-text { padding-right: 0; margin-bottom: 15px; text-align: left; width: 100%; } }

Если себе на сайт еще не ставили, или ищете легких путей — пользуйтесь на здоровье. Увидеть баннер живьем можно например на https://netspark.ru.