diff --git a/README.md b/README.md index 5d5f1ca..cbd47f1 100644 --- a/README.md +++ b/README.md @@ -508,9 +508,18 @@ Javascript is used for spam protection and to display error/success messages. Allow users to opt-in to tracking. Matomo and Google analytic are supported out of the box. -See `assets/js/tracking.js` for example how to implement it. +See `assets/js/tracking.js` for example how to implement it for other cookies. -The name of the cookie set is "cookieconsent" and it can have the values "accept" or "decline" depending on what button the visitor clicks. +The users choice is stored in localStorage item "cookieconsent". + +It it recommended to add a link or button to allow users to change their choice. Adding the class "clearcookieconsent" is all that is needed. + +```html + +Cookie settings +``` + +When a user clickes the button/link the localStorage item "cookieconsent" is cleared and the cookieconsent dialog is shown again. ![Lighthouse report](https://raw.githubusercontent.com/frjo/hugo-theme-zen/main/images/cookieconsent.png) diff --git a/assets/js/cookieconsent.js b/assets/js/cookieconsent.js index acb27c2..835a275 100644 --- a/assets/js/cookieconsent.js +++ b/assets/js/cookieconsent.js @@ -29,4 +29,16 @@ }); }); + const clear_buttons = document.querySelectorAll('.clearcookieconsent'); + clear_buttons.forEach(function (button) { + button.addEventListener('click', function (e) { + e.preventDefault(); + if (cookiebanner && cookieconsent) { + localStorage.removeItem('cookieconsent'); + cookiebanner.classList.remove('hidden'); + cookiebanner.classList.add('js-cookieconsent-open'); + } + }); + }); + })();