Все статьи | Блог студента

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

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Как сверстать классный баннер об использовании cookie главное изображение

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

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

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

example of cookie banner

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

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--activedisplay: 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=/";
  });
};
Аватар пользователя Vadim Filimonov
Vadim Filimonov 27 декабря 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
18 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
18 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
18 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
18 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
18 мая 5 месяцев