Alex-D / Cookies-EU-banner

1kb vanilla JS script which manages cookies consent banner display like asked by GDPR

Home Page:http://alex-d.github.io/Cookies-EU-banner/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Option to add class to body or html tag once cookie has been accepted OR rejected

1corn opened this issue · comments

I am displaying the banner using position: fixed (at the bottom of the viewport) and in order for it to not hide my footer I am adding some additional padding-bottom to my main wrapper when the banner is present.

I am removing the padding once cookies have been accepted the same way I activate my Google Analytics, no problem. But there currently doesn't seem to be an easy way to to add a style when cookies are rejected - or am I missing something?

It would be great to have an option to add a class to the body after accepting/rejecting cookies or when the hasConsent cookie is already present. Something like '.cookies-eu-banner-present'.

So, you want a reject callback?

You can already call hasConsent on the CookiesEuBanner instance if you want, but I have to admit that this is not the most convenient way to do it after reject button is pushed

Exactly, I thought there might be a better way to solve this. But maybe I'm missing something. To set a body class for every case in which the banner is not present, I currently need to look at 3 separate cases (simplified):

In case I have consent, I just do this, very easy:

new CookiesEuBanner(function () {

  body.classList.add("cookie-present");

  // (...) everything else I do when consent has been given

}, true);

If the user rejects, I do this on button press:

$('#cookies-eu-reject').on('click', function() {
  $('body').addClass('cookie-present');
});

And if the user visits the page and consent has already been rejected before, I do this:

function addCookieConditionalStyles() {
  if (cookie != null) {
    $('body').addClass('cookie-present');
  }
}

PS: Beautiful plugin, thanks for the quick reply!