Предупреждение об использовании cookie файлов

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

Шаг1. Создать разметку в подвале

<div class="cookiePrompt">
	<div class="cookiePrompt-wrap">
		<div class="cookiePrompt-text">
			<p>{opt.cookiePrompt|nl2br}</p>
		</div>
		<div class="cookiePrompt-close">
			<a href="javascript:;" class="cookiePrompt-close-link" title="Закрыть предупреждение">&times;</a>
		</div>
	</div>
</div>

Шаг 2.  Добавить стили

.cookiePrompt{
	background: #fff;
	position: fixed;
	bottom: 0;
	box-shadow: 0 0 10px #777;
	width: 100%;
	transform: translateY(100%);
	opacity: 0;
	transition: .4s;

	&.active{
		transform: none;
		opacity: 1;
	}
	&-wrap{
		.wrap; // Используем общую обертку от верстки сайта. Тут обычно максимальная ширина и выравнивание по центру
		display: flex;
		align-items:center;
	}
	&-close{
		padding-left: 100px;

		&-link{
			text-decoration: none;
			color: #999;
			font-size: 36px;
		}
	}
}

Шаг 3. Добавить JS-функцию в main.js и прописать ее вызов на загрузку страницы

function cookiePrompt(){
	var container = document.querySelector(".cookiePrompt"),
		closeLink = document.querySelector(".cookiePrompt-close-link"),
		hidePrompt = (new rpCookie()).get("cookiePromptHide",'0');
	if( hidePrompt == '0'){
		container.classList.add("active");
		closeLink.addEventListener("click", function(e){
			e.preventDefault();
			(new rpCookie()).set("cookiePromptHide",'1');
			container.classList.remove("active");
		});
	}
}
Шаг 4. Создать опцию в настройках сайта со следующими параметрами:

Ключ опции: cookiePrompt
Описание: Текст предупреждения о файлах cookie
Значение: Мы используем cookie (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства пользователей. Мы серьезно относимся к защите персональных данных — ознакомьтесь с <a href="/link/to/terms/">условиями и принципами их обработки</a>.

Вы можете запретить сохранение cookie в настройках своего браузера.

 

Должно получиться примерно так
Должно получиться так