CookieConsent. Вывести уведомление о cookie на сайт.

Здравствуйте, уважаемые форумчане. Столкнулся с потребностью вывести cookie уведомление при первом посещении сайта. Пробовал использовать плагин CookieConsent и ничего не вышло. Может кто знает, где я ошибся? Ниже прилагаю:

Настройки плагина CookieConsent

Код чанка:

<div data-name="[[++cookieName]]" data-value="[[++cookieValue]]" data-days="[[++cookieDays]]"  class="alert alert-warning alert-dismissible fade in [[++class]]" role="alert">
  <p class="text-center">
    We have placed cookies on your device to help make this website better. You can view our <a title="View out cookie policy" href="[[++idCookiePolicy:gt=`0`:then=`[[~[[++idCookiePolicy]]]]`:else=`/`]]">cookie policy here</a>.
    <button type="button" class="btn btn-info" data-dismiss="alert">Continue using site</button>
  </p>
</div>

<script>
  $(function() 
  {
    $(".[[++class]] button").click(function ()
    {
      $(".[[++class]]").mabCookieSet({onDone: function(){$(".[[+class]]").hide();}});
    });
  });
</script>

В документации указано, что после установки, пакет будет работать (даже без вызова чанка?). Установил, настроил — не работает. Попробовал вызвать чанк, и все равно не работает. Если кто скажет, что я сделал не так — буду благодарен.
Или же, напишите в комментариях, чем вы пользуетесь для выведение cookie-уведомления. Заранее спасибо.

Алексей

09 января 2020, 01:09

4 749

Комментарии: 6

Сергей Шлоков

10 января 2020, 08:34

Судя по чанку должен быть подключен jQuery и Bootstrap.

Александр Мельник

10 января 2020, 09:14

Охота вам мудрить с чужими компонентами.
JS нативно умеет выставлять куки
learn.javascript.ru/cookie
Fenom умеет работать с суперглобальными массивами и легко получить {$.cookies}
Осталось в шаблоне проверить если есть в массиве {$.cookies} нужная, то не показывать уведомление, если нет — то показать. А для кнопки закрытия уведомления написать обработку, что при клике закрыть и выставить нужную куку.

Kurt

21 сентября 2022, 03:48

Да, конечно.
Зачем использовать готовый компонент? Их же просто так создают.
Надо обязательно зае***ься мозгами.

deleted

21 сентября 2022, 12:34

А смысл тратить время на то чтоб разбираться с чужим дополнением, если там кода на несколько строчек?

<style>
    .cookie-message {
        position: sticky;
        z-index: 100;
        bottom: 0;
        background-color: #fff;
        border-top: 1px solid #d3d3d3;
    }

    .cookie-message-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 0;
        line-height: 1.2;
    }

    .cookie-message-text {
        flex-grow: 2;
    }
</style>

<div class="cookie-message js-cookie-message" hidden>
    <div class="container">
        <div class="cookie-message-inner">
            <div class="cookie-message-text">
                текст
            </div>
            <button class="button js-cookie-message-confirm">ОК</button>
        </div>
    </div>
</div>

<script>
    if (!localStorage.getItem('cookieAccept')) {
        const el = document.querySelector('.js-cookie-message');
        el.style.display = 'block';
        el.querySelector('.js-cookie-message-confirm').addEventListener('click', (e) => {
            localStorage.setItem('cookieAccept', 1);
            el.style.display = 'none';
        }, true);
    }
</script>

Evgeny

20 декабря 2022, 20:16

Вставил код, но блок скрыт уже сразу. В чем может быть проблема?

Денис Усачев

22 марта 2023, 10:28

У меня работает так

<div class="cookie-message js-cookie-message">
    <div class="container">
        <div class="cookie-message-inner">
            <div class="cookie-message-text">
                We use cookies to enhance your experience. 
            </div>
            <button class="button js-cookie-message-confirm">OK</button>
        </div>
    </div>
</div>
<script>
const el = document.querySelector('.js-cookie-message');
    if (!localStorage.getItem('cookieAccept') || localStorage.getItem('cookieAccept') == 0) {
        el.style.display = 'block';
        el.querySelector('.js-cookie-message-confirm').addEventListener('click', (e) => {
            localStorage.setItem('cookieAccept', 1);
            el.style.display = 'none';
        }, true);
    } else {
        el.style.display = 'none';
          
    }
</script>

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.