Уведомление о cookie для сайта всего в 5kb кода

Уведомление о cookie для сайта позволит элегантно информировать пользователей о том, что сайт использует куки-файлы, соблюдая законодательство ЕС о cookie-файлах GDPR и правила CCPA.

Что такое куки?

Файл cookie — это небольшой текстовый файл, который веб-сайт сохраняет на вашем компьютере или мобильном устройстве, когда вы посещаете его. Цель состоит в том, чтобы дать сайту возможность запомнить ваши предпочтения (например, имя пользователя, язык и т. Д.) В течение определенного периода времени. Таким образом, вам не придется вводить их повторно при просмотре сайта во время одного посещения.

Данный вариант уведомления подойдет не только для сайтов на WordPress, но и для любых других платформ.

Я здесь не буду публиковать весь код, сделаю лишь пояснения. Скачать архив можно будет перейдя по ссылке в конце статьи.

Вариант 1 с расположением всплывающего слева в углу

Уведомление о cookie для сайта Демонстрация первого варианта

Вариант 2 с расположением всплывающего снизу, во всю ширину

Уведомление о cookie для сайта Демонстрация второго примера

В обоих примерах используется одинаковая HTML разметка, JS настройки также аналогичные. Отличие составляет только стилевое оформление в файле style.css

Алгоритм подключения уведомлений к сайту

  1. Для начала нужно подключить скрипт jquery.cookie.min.js. Перейдя по ссылке можно ознакомиться с настройками. Скрипт зависит от библиотеки jquery.
  2. Далее создать HTML разметку.
  3. Написать стили CSS для Popup Окна уведомления о cookie
  4. Настроить появление всплывающего окна по времени.

Советую ознакомиться со статьей Подключение скриптов JS и JQuery к WordPress.

Остановлюсь более подробно на настройках появления всплывающего окна. HTML разметку и стили можно будет посмотреть в примере.

Настройки появления всплывающего окна

В примере я создал файлик с названием script.js, подключил его ниже jquery.cookie.min.js и в него поместил нижеследующий код с настройками. Смотрите пояснения внутри файла.

jQuery(function ($) {
	'use strict';

	if (typeof jQuery != "undefined") jQuery(function ($) {
        
		// Открываем окно
		if (!$.cookie('HideModal1')) {
			setTimeout(function () {
				$('#popupModal').fadeIn('slow', 'swing');
			}, 1000);
		}

		// Закрываем на месяц при клике на крестик закрытия окна
		$('#popupModal .close').on('click', function () {
			$('#popupModal').fadeOut('slow', 'swing');
			$.cookie('HideModal1', true, {expires: 30, path: '/'});
		});

        // Закрываем на месяц при клике на кнопку
		$('#popupModal .btn-close').on('click', function () {
			$('#popupModal').fadeOut('slow', 'swing');
			$.cookie('HideModal1', true, {expires: 30, path: '/'});
		});

	});

});

Обратите внимание на 10, 16 и 32 строку в коде.

  • 1000 — Задержка открытия Popup окна в миллисекундах после загрузки страницы. 1000 миллисекунд равняется 1-й секунде.
  • expires: 30 — открытие Popup окна один раз в месяц. Логично, что, если заменить параметр с на 1, то окно будет открываться 1 раз в день.

Эти параметры можно менять на свое усмотрение.

Оба примера я скомпоновал в архив, который можно скачать тут: Сookie Notice

Альтернатива данному коду — плагин Cookie Notice for GDPR & CCPA. Плагин также имеет опции настройки внешнего вида, времени открытия.

Оставьте комментарий