Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

Время чтения статьи ~3 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Как сверстать классный баннер об использовании 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=/";
  });
};
Аватар пользователя filimonov
filimonov 27 декабря 2021
3
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время