Добавить дисклеймер в cookies браузера

120

02 июля 2021, 12:30

Как правильно записывать страницу в cookies?

Есть сайт на WP, на сайте есть страница на которую если зайти то сразу же показывается всплывающее окно во всю страницу и с кнопками да и нет, типа согласны мы на эти условия или нет. Если нажимаешь "Да" то это всплывающее окно закрывается и показывается страничка сайта, если нажать "Нет" то просто переадресация на сайт google.com. На кнопку "Да" есть вот такой JS обработчик клика.

    document.body.classList.add('body-overflow');
    let modal = document.querySelector('.alert-modal');
    let agree = document.querySelector('.alert-modal__btn--agree');
    let disagree = document.querySelector('.alert-modal__btn--disagree');
    let alertOverlay = document.querySelector('.alert-overlay');
    agree.addEventListener('click', function () {
        modal.style.opacity = 0, 5000;
        setTimeout(modal.style.display = 'none', 10000);
        setTimeout(document.body.classList.remove('body-overflow'), 50000);
        alertOverlay.style.opacity = 0;
        setTimeout((alertOverlay.style.display = 'none'), 10000);
    })

Не совсем понимаю зачем здесь используется функция SetTimeout да еще и с такими таймаутами как 10 и 50 сек:) так как при нажатии на кнопку никакого таймаута не срабатывает и всё закрывается сразу без задержки. Так же в файле functions.php WP есть вот такой код для запуска скрипта с содержимым JS что я указал выше.

function single_styles() {    
      if ( is_page( 13 ) || is_page( 188 ) || is_page( 342 ) || is_page( 364 ) ) {
           wp_enqueue_script( 'alert', get_template_directory_uri() . '/js/alert.js',  array(), false, true);    
    }
}

Вот код кнопок "Да" и "Нет"

<div class="alert-modal__btn-wrapper">          
            <button class="alert-modal__btn alert-modal__btn--agree" >Да</button>
            <button class="alert-modal__btn alert-modal__btn--disagree" onclick="location.href='https://google.com'">Нет</button>
        </div>

Так вот это всплывающее окно на странице появляется постоянно как заходишь на эту страницу, а необходимо чтобы при нажатии кнопки "Да" данные записывались в cookies браузера и больше не показывались этому клиенту 30 дней.

Как правильно это реализовать? Чтобы при нажатии кнопки "Да" закрывалось это всплывающее окно и делалась запись в cookies браузера на 30 дней.

Answer 1

Правильно. Я не знаю, кто это писал, но никакие таймауты здесь не работают. Весь код выполняется сразу. Чтобы таймауты работали, нужно вместо

setTimeout(modal.style.display = 'none', 10000);

писать

setTimeout(function() {
  modal.style.display = 'none'
}, 10000);

или

setTimeout(() => modal.style.display = 'none', 10000);

необходимо чтобы при нажатии кнопки "Да" данные записывались в cookies

function setCookie() {
  const d = new Date();
  // Добавляем к текущему времени 30 дней в миллисекундах
  d.setTime(d.getTime() + 1000 * 3600 * 24 * 30);
  document.cookie = "hideAlert=1; expires=" + d.toUTCString();
}
setCookie();

и больше не показывались этому клиенту 30 дней.

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
if getCookie('hideAlert')
  setCookie();
else
  showAlert();