Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу
Код
<div id="cookie_notification">
<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>
<button class="button cookie_accept">Принять</button>
</div>
Второй кусок – стили (CSS). Тут все просто. Вам нужно найти файл style.css или main.css или Таблица стилей (CSS) и закинуть этот код в самый конец. Теперь ваше «предупреждение» должно выглядеть красиво и стильно, но… но на самом деле вы его не увидите вообще, пока не добавить код Java Script. Кстати стили я написал сразу адаптивными, чтобы ваше предупреждение об использовании Cookie выглядело ровно и адекватно не только на компьютерах, но также и на мобильных устройствах
Код
#cookie_notification{
display: none;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 15px;
left: 50%;
width: 900px;
max-width: 90%;
transform: translateX(-50%);
padding: 25px;
background-color: white;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_notification p{
margin: 0;
font-size: 0.7rem;
text-align: left;
color: $color_text;
}
@media (min-width: 576px){
#cookie_notification.show{
display: flex;
}
.cookie_accept{
margin: 0 0 0 25px;
}
}
@media (max-width: 575px){
#cookie_notification.show{
display: block;
text-align: left;
}
.cookie_accept{
margin: 10px 0 0 0;
}
})
Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (файл прикреплен в архиве), который срабатывает абсолютно на всех страницах сайта.
Код
<script src='/ваш путь/js/cookie/cookie.js'></script>
Когда вы все закончите, то вот, как у вас будет это выглядеть:
Готовый скрипт выглядит так
Код
<!-- START Cookie-Alert -->
<div id="cookie_notification">
<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>
<center><button class="button cookie_accept">Принять</button></center>
</div>
<link rel='stylesheet' href='/trade/assets/js/cookie/cookie.css' type='text/css' media='all' />
<script src='/trade/assets/js/cookie/cookie.js'></script>
<!-- /START Cookie-Alert -->
