Куки-баннер по-быстрому

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

Баннер совместим с 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.