![]()
Думаю не для кого не секрет, что на каждом сайте должно быть уведомление об использовании cookie.
А с 1 марта даже какие-то санкции предусмотрены, но не будем о грустном 😁
Я решил выложить небольшой скрипт, который использую сам и всем советую внедрить его на свой сайт, а теперь по порядку...
cookie.jsdocument.addEventListener('DOMContentLoaded', function () {
// Check if consent is already given
if (!getCookie('cookie_consent')) {
createCookieBanner();
}
function createCookieBanner() {
const banner = document.createElement('div');
banner.className = 'cookie-consent-banner';
banner.innerHTML = `
<div class="cookie-banner-content">
<p>Мы используем файлы cookie. Продолжая использовать сайт, вы соглашаетесь с нашей <a href="/agreement.php" target="_blank">Политикой конфиденциальности</a>.</p>
<button id="cookieConsentBtn" class="btn btn-primary">Согласен</button>
</div>
`;
document.body.appendChild(banner);
document.getElementById('cookieConsentBtn').addEventListener('click', function () {
setCookie('cookie_consent', 'accepted', 365);
banner.style.opacity = '0';
setTimeout(() => {
banner.remove();
}, 300);
});
// Slight delay for animation entry
requestAnimationFrame(() => {
requestAnimationFrame(() => {
banner.classList.add('show');
});
});
}
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
});
Данный скрипт будет показывать внизу страницы уведомление, что сайт использует cookie до тех пор, пока не нажать на кнопку "Согласен". Что бы это уведомление было красивым, есть еще один файл:
cookie.css
/* Cookie Consent Banner Styles */
.cookie-consent-banner {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
max-width: 800px;
margin: 0 auto;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
z-index: 9999;
padding: 16px 24px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-consent-banner.show {
opacity: 1;
transform: translateY(0);
}
.cookie-banner-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.cookie-banner-content p {
margin: 0;
font-size: 0.95rem;
color: #4b5563;
line-height: 1.5;
}
.cookie-banner-content a {
color: #2563eb;
text-decoration: none;
}
.cookie-banner-content a:hover {
text-decoration: underline;
}
.cookie-banner-content button {
white-space: nowrap;
padding: 10px 20px;
border-radius: 8px;
background: #111827;
color: white;
border: none;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.cookie-banner-content button:hover {
background: #374151;
}
@media (max-width: 600px) {
.cookie-banner-content {
flex-direction: column;
text-align: center;
}
.cookie-banner-content button {
width: 100%;
}
}
После подключения стилей, уведомление должно выглядеть следующим образом:
![]()
Стоит еще сказать, что Вам нужно либо поменять ссылку на Политику конфиденциальности в файле cookie.js, либо сделать файл с названием /agreement.php
Собственно всё, теперь нужно только правильно подключить файл на всех страницах сайта согласно структуре сайт, для этого в верху сайта между тегами <head></head> вставить следующий код:
<link rel="stylesheet" href="/cookie.css">
а внизу до закрывающего тега </body> вставить код:
<script src="/cookie.js" defer></script>
Если всё правильно сделано, то Вам не страшны проверки 😁
Комментарии
0Оставить комментарий