Как сделать уведомление об использовании Cookie на сайте

Уведомление об использовании Cookie на сайте без плагина

В этой заметке покажу, как сделать уведомление об использовании Cookie на сайте без использования плагинов. Такое предупреждение будет всплывать в виде плашки внизу сайта при его первом посещении.

Зачем вообще нам эта штуковина? Дело в том, что уведомление об использовании файлов cookie на сайте является обязательным по законодательству во многих странах, включая страны Европейского союза.

Это связано с тем, что файлы cookie могут собирать и обрабатывать персональные данные пользователей, такие как их местоположение, предпочтения и привычки. Уведомление позволяет пользователям быть информированными о том, что их данные могут быть использованы, и дает им возможность контролировать свою конфиденциальность в Интернете.

Файлы Cookie — это небольшие текстовые файлы, которые веб-сайты сохраняют на компьютере пользователя. Они содержат некоторую информацию о пользователе и его взаимодействии с сайтом, например, предпочтения пользователя и данные для входа на сайт.

Файлы Cookie могут быть полезны для улучшения опыта пользователя, например, для запоминания его предпочтений и автоматического входа на сайт без необходимости повторного ввода имени и пароля. Однако некоторые файлы Cookie могут использоваться для отслеживания пользовательской активности в Интернете, поэтому пользователи должны сами решить, пользоваться тем или иным сайтом, или нет.

Реализуется возможность такого уведомления пользователя при помощи вот такого JS-кода:

// Проверяем, была ли плашка уже показана
if (!localStorage.getItem('notificationShown')) {
  // Создание элемента плашки
  const notification = document.createElement('div');
  notification.classList.add('notification');
  notification.textContent = 'Этот сайт использует Cookie!';

  // Добавление кнопки "Хорошо" на плашку
  const closeBtn = document.createElement('button');
  closeBtn.classList.add('close-btn');
  closeBtn.textContent = 'Хорошо';
  notification.appendChild(closeBtn);

  // Добавление плашки внизу экрана
  document.body.appendChild(notification);

  // Анимация появления плашки
  notification.style.transform = 'translateY(100%)';
  notification.style.opacity = '0';

  setTimeout(() => {
    notification.style.transform = 'translateY(0)';
    notification.style.opacity = '1';
  }, 1000);

  // Закрытие плашки по клику на кнопку "Хорошо"
  closeBtn.addEventListener('click', () => {
    notification.style.transform = 'translateY(100%)';
    notification.style.opacity = '0';
    localStorage.setItem('notificationShown', true);
  });
}

// Проверяем, была ли плашка уже показана

if (!localStorage.getItem('notificationShown')) {

// Создание элемента плашки

const notification = document.createElement('div');

notification.classList.add('notification');

notification.textContent = 'Этот сайт использует Cookie!';

// Добавление кнопки "Хорошо" на плашку

const closeBtn = document.createElement('button');

closeBtn.classList.add('close-btn');

closeBtn.textContent = 'Хорошо';

notification.appendChild(closeBtn);

// Добавление плашки внизу экрана

document.body.appendChild(notification);

// Анимация появления плашки

notification.style.transform = 'translateY(100%)';

notification.style.opacity = '0';

setTimeout(() => {

notification.style.transform = 'translateY(0)';

notification.style.opacity = '1';

}, 1000);

// Закрытие плашки по клику на кнопку "Хорошо"

closeBtn.addEventListener('click', () => {

notification.style.transform = 'translateY(100%)';

notification.style.opacity = '0';

localStorage.setItem('notificationShown', true);

});

}

Объясню, за что отвечает каждая строка представленного кода:

if (!localStorage.getItem(‘notificationShown’)): эта строка проверяет, была ли плашка уже показана пользователю. Если значение ключа ‘notificationShown’ в объекте localStorage равно null, то это означает, что плашка ещё не была показана, и мы можем продолжить её отображение.
const notification = document.createElement(‘div’);: создает новый элемент div, который будет использоваться для отображения плашки на странице.
notification.classList.add(‘notification’);: добавляет класс notification к элементу div, чтобы мы могли стилизовать его через CSS.
notification.textContent = ‘Этот сайт использует Cookie!’;: строчка устанавливает текст, который будет отображаться на плашке.
const closeBtn = document.createElement(‘button’);: создает новый элемент button, который будет использоваться для отображения кнопки «Хорошо».
closeBtn.classList.add(‘close-btn’);: добавляет класс close-btn к элементу button, чтобы мы могли стилизовать его через CSS.
closeBtn.textContent = ‘Хорошо’;: устанавливает текст, который будет отображаться на кнопке.
notification.appendChild(closeBtn);: добавляет кнопку «Хорошо» на плашку.
document.body.appendChild(notification);: добавляет плашку в конец тела документа (body).
notification.style.transform = ‘translateY(100%)’; notification.style.opacity = ‘0’;: устанавливают начальные значения стилей для анимации появления плашки.
setTimeout(() => { notification.style.transform = ‘translateY(0)’; notification.style.opacity = ‘1’; }, 1000);: этот код запускает анимацию появления плашки через секунду после её отображения.
closeBtn.addEventListener(‘click’, () => { … });: код добавляет обработчик событий на кнопку «Хорошо». Когда пользователь нажимает на кнопку, плашка скрывается, и значение ключа ‘notificationShown’ в объекте localStorage устанавливается в true, чтобы в следующий раз не отображать плашку снова.

В целом, этот код создаёт и отображает плашку на странице. Затем добавляет анимацию появления и обработчик событий на кнопку «Хорошо».

Как добавить скрипт на сайт, работающий на WordPress? Есть несколько способов добавления JavaScript-файлов на сайт. Вот один пример через тему оформления.

Можно добавить свой JavaScript-файл в папку темы WordPress и подключить его в файле functions.php темы. Для этого нужно создать папку js в корневой директории рабочей темы и поместить туда файл скрипта. Затем в файле functions.php темы можно добавить следующий код:

function my_theme_scripts() {
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/myscript.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

function my_theme_scripts() {

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/myscript.js', array(), '1.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Этот код добавит скрипт на сайт WordPress. Всё очень просто.

Теперь давайте стилизуем плашку. Следующий код надо добавить в файл стилей style.css:

.notification {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.close-btn {
  display: inline-block;
  margin-top: 8px;
  margin-left: 50px; /* Добавляем отступ слева */
  padding: 8px 16px;
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #f00;
  color: #fff;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 767px) {
  .notification {
    font-size: 14px; /* Уменьшаем размер шрифта */
    padding: 12px; /* Уменьшаем отступы */
  }

  .close-btn {
    margin-left: 16px; /* Уменьшаем отступ слева */
    margin-right: -16px; /* Добавляем отступ справа */
    padding: 6px; /* Уменьшаем размер кнопки */
    font-size: 14px; /* Уменьшаем размер шрифта кнопки */
  }
}

.notification {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

padding: 16px;

background-color: #333;

color: #fff;

text-align: center;

font-size: 16px;

}

.close-btn {

display: inline-block;

margin-top: 8px;

margin-left: 50px; /* Добавляем отступ слева */

padding: 8px 16px;

background-color: #fff;

color: #333;

border: none;

border-radius: 4px;

font-size: 16px;

font-weight: bold;

line-height: 1;

cursor: pointer;

}

.close-btn:hover {

background-color: #f00;

color: #fff;

}

/* Медиа-запрос для мобильных устройств */

@media (max-width: 767px) {

.notification {

font-size: 14px; /* Уменьшаем размер шрифта */

padding: 12px; /* Уменьшаем отступы */

}

.close-btn {

margin-left: 16px; /* Уменьшаем отступ слева */

margin-right: -16px; /* Добавляем отступ справа */

padding: 6px; /* Уменьшаем размер кнопки */

font-size: 14px; /* Уменьшаем размер шрифта кнопки */

}

В коде добавлен медиа-запрос для мобильных устройств, чтобы уменьшить размер шрифта и отступов плашки, а также уменьшить размер кнопки и добавить отступ справа. Это позволит плашке хорошо смотреться на мобильных устройствах.