Как сверстать классный баннер об использовании cookie

В этой статье мы поэтапно сверстаем информационную плашку об использовании cookie.

• HTML
• Основной CSS
• JavaScript
  • Who
  • findElements()
  • subscribe()
  • onClick()
  • hideContainer()
  • setCookie()
  • Через бэк
  • Через фронт

Вы наверняка видели на разных сайтах всплывающий блок снизу.

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

Давайте заверстаем нечто подобное =)

HTML

<div class="warning warning--active">
  <div class="warning__text">На этом веб-сайте используются cookie.</div>
  <button class="warning__apply" type="button">OK</button>
  <a class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank">Читать полностью</a>
</div>

Наш баннер будет состоять из текста, кнопки подтверждения и ссылки на поясняющий документ.

Основной CSS

.warning {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
}

.warning--active {
  display: flex;
}

Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.

JavaScript

В нашем скрипте нам необходимо:

• Убедиться, что блок есть — иначе остановить работу
• Найти блок и кнопку подтверждения
• Навесить на кнопку «Слушатель»
• При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его
• Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.

let container;
let apply;

const init = () => {
  if (!who()) {
    // останавливаем работу скрипта
    return;
  }
  findElements();
  subscribe();
};

Who

Если блока на странице нет — функция вернет false:

const who = () => document.querySelector(".warning");

На самом деле вернет undefined, но он преобразуется в false

findElements()

Находим сам блок и кнопку внутри:

const findElements = () => {
  container = document.querySelector(".warning");
  apply = container.querySelector(".warning__apply");
};

subscribe()

Добавляем кнопке обработчик события «клик»:

const subscribe = () => {
  apply.addEventListener("click", onClick);
};

onClick()

const onClick = (event) => {
  // Отменяем поведение по умолчанию
  event.preventDefault();
  // Прячем блок
  hideContainer();
  // Устанавливаем куки
  setCookie();
};

hideContainer()

const hideContainer = () => {
  container.classList.remove("warning--active");
};

В разделе основной css можно увидеть, что у класса warning задано свойство display: none;, а у warning--active — display: flex;

Удалив warning--active, мы скрываем блок.

setCookie()

const setCookie = () => {
  document.cookie = "warning=true; max-age=2592000; path=/";
};

Установим куки, которые будут говорить нам о том, что пользователь принял согласие на использование кук.

2592000 — количество секунд в месяце

После установки куки предполагается, что блок больше не будет появляться на странице.

Этого можно достичь двумя способами

Через бэк

Просим бэкенд или самостоятельно (если вы и есть бэк) не выводить блок, если заданные вами куки есть у пользователя.

Автор статьи предпочитает способ через бэк =)

Через фронт

Перепишем функцию who(), которая вместо проверки на наличие блока будет искать куки:

const who = () => {
  // если куки есть — вернет true
  return getCookie('warning');
};

Реализацию функции getCookie можно посмотреть на learn.javascript.ru

Из HTML убираем класс warning--active

<div class="warning">

По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:

const showContainer = () => {
  container.classList.add("warning--active");
};

const init = () => {
  if (!who()) {
    return;
  }
  findElements();
  showContainer();
  subscribe();
};

Все остальное без изменений.

Полный скрипт:

let container;
let apply;

const who = () => document.querySelector(".warning");

const findElements = () => {
  container = document.querySelector(".warning");
  apply = container.querySelector(".warning__apply");
};

const hideContainer = () => {
  container.classList.remove("warning--active");
};

const setCookie = () => {
  document.cookie = "warning=true; max-age=2592000; path=/";
};

const onClick = (event) => {
  event.preventDefault();
  hideContainer();
  setCookie();
};

const subscribe = () => {
  apply.addEventListener("click", onClick);
};

const init = () => {
  if (!who()) {
    return;
  }
  findElements();
  subscribe();
};

init();

Или на codepen.

Полный скрипт можно сократить до 8 строк

if (document.querySelector(".warning")) {
  const container = document.querySelector(".warning");
  const apply = container.querySelector(".warning__apply");
  apply.addEventListener("click", () => {
    container.classList.remove("warning--active");
    document.cookie = "warning=true; max-age=2592000; path=/";
  });
};