Создание cookie предупреждения на свой сайт | Блог веб-разработчика MaxGraph

Создание cookie предупреждения на свой сайт

 

У меня сразу к Вам вопрос — нужен ли Вам видеоразбор создания сайта на OpenCart? Лучше по подходу чем на WP, то что на WP вообще ужас и я обязательно это дело перепишу) А вот к OpenCart подойду лучше и в плане звука, и в плане выхода видео. Что думаете, пишите в вк\телеграм\комменты)

 

А сейчас куки.

 

 

Для чего все это?

Для чего нужна эта пресловутая «полоска cookie»? Очень просто. Она требуется законодательством, и человек, заходя впервые на сайт, должен знать, что тут используются какие-либо его данные, и они хранятся в cookie. Это своеобразное предупреждение.
Так вот, сейчас я покажу, как такую полоску сделать)

 

 

Разметка

Разметка весьма проста — делаем обычный блок)

1
2
3
4
5
<div class="bottom__cookie-block">
    <p>Продолжая использовать сайт, вы соглашаетесь на сбор файлов cookie</p>
    <a href="javascript:void(0);" class="ok">Ок</a>
    <a href="#" class="podr">Подробнее</a>
</div>
<div class="bottom__cookie-block">
	<p>Продолжая использовать сайт, вы соглашаетесь на сбор файлов cookie</p>
	<a href="javascript:void(0);" class="ok">Ок</a>
	<a href="#" class="podr">Подробнее</a>
</div>

 

 

Такой вот простой блок. Первая ссылка просто закрывает его, вторая (необязательно) может вести, например, на политику конфеденциальности, которая пояснит, зачем вообще эта полоса)

Стили

В стилях все еще проще, обычный блок с position: fixed.

1
2
3
4
5
6
7
8
9
10
.bottom__cookie-block
    width: 100%
    height: 48px
    background-color: #ffffff
    display: none
    position: fixed
    bottom: 0
    z-index: 100000
    text-align: center
    -webkit-transform: translateZ(0)
.bottom__cookie-block
	width: 100%
	height: 48px
	background-color: #ffffff
	display: none
	position: fixed
	bottom: 0
	z-index: 100000
	text-align: center
	-webkit-transform: translateZ(0)

 

Небольшое уточнение по поводу translateZ(0). В процессе создания данной полосы я сталкивался с проблемой, что именно на хроме при скролле сайта эта полоса прыгает. Данное свойство фиксит эту проблему.

 

 

Итак, у нас есть сама полоса, теперь пора ее «оживить».
Подключаем cookie.js (будет приложен к посту)

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>

 

Подключили файл, теперь нужно описать поведение всего этого дела. Делается тоже несложно)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="jquery.cookie.js"></script>
$(function() {
  // Проверяем запись в куках о посещении
  // Если запись есть - ничего не происходит
     if (!$.cookie('hideModal')) {
  // если cookie не установлено появится окно
  // с задержкой 5 секунд
    var delay_popup = 1000;
    setTimeout("document.querySelector('.bottom__cookie-block').style.display='inline-block'", delay_popup);
     }
     $.cookie('hideModal', true, {
   // Время хранения cookie в днях
    expires: 30,
    path: '/'
   });
});
 
// Закрытие полосы cookie
 
 
$('.ok').click(function(){
    $('.bottom__cookie-block').fadeOut();
});
<script src="jquery.cookie.js"></script>
$(function() {
  // Проверяем запись в куках о посещении
  // Если запись есть - ничего не происходит
     if (!$.cookie('hideModal')) {
  // если cookie не установлено появится окно
  // с задержкой 5 секунд
    var delay_popup = 1000;
    setTimeout("document.querySelector('.bottom__cookie-block').style.display='inline-block'", delay_popup);
     }
     $.cookie('hideModal', true, {
   // Время хранения cookie в днях
    expires: 30,
    path: '/'
   });
});

// Закрытие полосы cookie


$('.ok').click(function(){
    $('.bottom__cookie-block').fadeOut();
});

 

Как видим, через setTimeout запускается показ нашей полосы. переменная expires отвечает за кол-во дней использования cookie. Остальное в общем-то знать не нужно. А внизу просто закрытие полосы по нажатию на ссылку с классом ok.
 

 

ссылка на скачивание cookie.js.

 

 
UPD: DEMO
 

 

В целом просто и полезно, друзья!

 

 

Пишите, пожалуйста, насчет OpenCart. Я не могу сказать, что идеально в нем разбираюсь, но небольшой магазинчик можно сделать, будет круто)

Метки: , ,

Понравилось? Оцени!
12345 (9 оценок, среднее: 3,33 из 5)
Загрузка...

14 комментариев на «“Создание cookie предупреждения на свой сайт”»

  1. Добрый день!

    *Подключаем cookie.js (будет приложен к посту)

    не могу найти где он тут приложен?)

  2. Попытался реализовать. Не пошло. Подозреваю, что что то не так сделал. в связи с чем вопросы.
    1. Строки в стилях не должны заканчиваться символом ; ?
    2. Куда вставлять разметку (первый блок кода)?
    3. Блок кода начинающийся со $(function() { — и до конца, не должен быть заключен в теги ?

  3. Спасибо, большое. Очень все понятно описано, все работает. Только у меня почему-то не работает bottom: 0, и предупреждение прилеплено к верху страницы… ну да, ладно. Главное, что работа других скриптов не нарушается.

    • Здравствуйте. Не пробовал.
      Напишите мне в личку куда-нибудь (телеграм, вк) — разберемся. Ну либо же сами поставьте — проверьте)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *