From cf0c43760ca9eb6564240d8fcbd45c18a76936b3 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Mon, 17 Jul 2023 10:51:24 +0200 Subject: [PATCH] Add clearcookieconsent link/button option. --- README.md | 13 +++++++++++-- assets/js/cookieconsent.js | 12 ++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) 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'); + } + }); + }); + })();