Websites that are available inside the European Union must ask their visitors for permission before they store cookies that are not strictly necessary to run the site. This rule was introduced by the EU ePrivacy Directive (the so-called "cookie law") and was later strengthened by the General Data Protection Regulation (GDPR), which came into force on the 25th of May 2018.
For a website owner, this means: before an analysis service or a personalization service may write a persistent cookie to the visitor’s computer, the visitor has to agree to it — and the visitor must be able to change or withdraw that decision at any time.
The Cookie Consent module of the J1 Template takes care of exactly that. It shows a consent dialog at the top of the website on the first visit, lets the visitor accept or refuse cookies per category, stores the decision in a consent cookie, and offers a cookie icon in the menu bar to change the settings later. All texts of the dialog can be configured (and translated) in a single YAML file — no programming is needed.
10-60 Minutes to read
Introduction
The Cookie Consent module of the J1 Template shows a consent dialog compliant with the GDPR rules given by the EU government. The dialog is a Bootstrap Modal-based window placed at the top of the website. It presents the cookie categories used by the site and provides buttons to accept or decline cookies and to show the Privacy Notice and the detailed cookie settings.
The dialog is built as a modern web component named <j1-cookie-consent>. You do not need to know anything about web components to use it: the component is created and configured automatically by the J1 Template when a page loads. Everything you may want to change — the texts, the button labels, the cookie lifetime, or whether the dialog opens automatically — is set in YAML configuration files. No JavaScript programming is needed.
| All texts shown in the dialog (the title, the body text, the Privacy Notice, and every button label) come from a single configuration file. This makes it easy to adapt the wording to your site or to translate the complete dialog into another language. See the Options section for all available settings. |
Cookie categories
The module manages the visitor’s consent for three categories of cookies. The visitor can allow or refuse the categories Analysis and Personalization independently; the category Necessary is always enabled because the website cannot work without it.
| Category | Description |
|---|---|
| Cookies that are required to run the website. The J1 Template stores the data needed to control the site in session cookies only. Session cookies are removed automatically by the browser when the visitor closes all browser windows. This category cannot be switched off. |
| Cookies used to analyze how the website is used, for example by a traffic analysis service like Google Analytics. The collected data helps to optimize the pages and to improve the visitors' experience. These services use persistent cookies that remain on the visitor’s computer, which is why consent is required. |
| Cookies used to remember personal settings of a visitor, for example the selected theme, the translation language, or settings for comment services. Partner services (like Bootswatch, Hyvor, Disqus, or Google) use persistent cookies for this category as well, so consent is required here, too. |
The Consent dialog
When a visitor opens the website for the first time (or after the consent cookie has expired), the consent dialog is shown automatically. The dialog offers the following buttons in its footer:
| Button | What it does |
|---|---|
| The visitor refuses all optional cookies. Only the Necessary category stays enabled, the decision is stored in a session cookie (it is not kept after the browser is closed), and the visitor is redirected to an information page ( |
| A toggle button that opens and closes the Privacy Notice section inside the dialog. While the section is closed, the button reads Show Privacy Notice; while it is open, the button reads Hide Privacy Notice. The Privacy Notice explains in detail what data is collected and which partners are involved. |
| A toggle button that opens and closes the detailed settings section. The section shows one on/off switch per cookie category (the Necessary switch is always on and cannot be changed). Opening the settings also closes the Privacy Notice section, so the dialog does not grow too tall. While the settings are open, the footer changes to the buttons |
| The visitor accepts all cookie categories. The decision is stored in a persistent consent cookie. |
| (Shown while the settings section is open.) Stores exactly the categories the visitor has switched on. |
| (Shown while the settings section is open.) Enables all categories and stores the decision — a shortcut equivalent to |
| Closes the dialog without changing anything. |
The visitor’s decision is stored in a consent cookie (by default named j1.user.consent). The cookie contains the state of the three categories as encoded JSON data. Its lifetime, domain, and security attributes are taken from the site’s cookie configuration.
How the module works
Behind the scenes, two parts work together:
-
The adapter (
~/assets/theme/j1/adapter/js/cookieConsent.js) runs when a page loads. It reads the YAML configuration (the module defaults merged with your site settings), builds the complete text content for the dialog, and creates the<j1-cookie-consent>component with all options. Because the texts are handed over directly, the dialog needs no extra network request to load its content and can open immediately. -
The component (
~/assets/theme/j1/modules/cookieConsent/js/cookieConsent.mjs) renders the dialog, reacts to the buttons, and writes the consent cookie. If no consent cookie is found and the optionautoShowDialogis enabled, the dialog opens automatically.
After the visitor has made a selection, the module calls a callback function (by default j1.adapter.cookieConsent.cbCookie). The callback applies the decision to the rest of the site:
-
If the visitor allowed only the required cookies, all persistent J1 cookies are shortened to session cookies (option
expireCookiesOnRequiredOnly) — GDPR does not require consent for session-only cookies. -
If Google Analytics tracking is disabled or configured with an invalid tracking ID, all Google Analytics cookies that may be left over from earlier visits are removed for better privacy.
-
If the settings have changed, the current page is reloaded (option
reloadPageOnChange) so all modules on the page pick up the new consent state right away.
Enabling the module
The module is switched on in the user configuration file _data/modules/cookieconsent.yml of your site:
settings:
enabled: true
showCookieIcon: trueWith showCookieIcon enabled, a cookie icon is shown in the menu bar of the website. Visitors can click this icon at any time to reopen the consent dialog and change or withdraw their earlier decision — a requirement of the GDPR.
Checking consent from your own code
If you write your own scripts and want to run code only when the visitor has given consent for a category, ask the module for the stored settings:
// returns true|false for a single category ...
if (j1.cookieConsent.getSettings('analysis')) {
// Google Analytics or other analysis code here
}
// ... or the complete settings object
const consent = j1.cookieConsent.getSettings();
// e.g. { necessary: true, analysis: false, personalization: true }To open the consent dialog from your own code (for example from a custom link), call:
j1.cookieConsent.showDialog();The dialog is not opened on pages listed in the whitelisted option; see the Options section.
Options
The Cookie Consent module is configured in two YAML files. The defaults file ships with the template and defines every available option with a sensible default value. The user file belongs to your site; every option you place there overrides the default of the same name.
| File | Purpose |
|---|---|
| Default settings of the template. Do not change this file — it is replaced when the template is updated. |
| User settings of your site. Place all your changes here. Only the options you want to change need to be listed; everything else keeps its default value. |
A typical user configuration looks like this:
settings:
enabled: true
showCookieIcon: true
reloadPageOnChange: true
expireCookiesOnRequiredOnly: true
postSelectionCallback: j1.adapter.cookieConsent.cbCookieThis section lists all available options. Each option gets its own subsection with a short description. The accepted value type and the default value are summarised in a small table at the end of each subsection.
General options
enabled
Turns the Cookie Consent module on or off for the whole site. If the module is disabled, no consent dialog is shown; in addition, all persistent J1 cookies are shortened to session cookies, and features that depend on consent — like the Themes menu and the Translator quick link — are hidden, because without a consent dialog the visitor cannot allow the cookies these features need.
| Name | Type | Default |
|---|---|---|
| boolean | false |
showCookieIcon
Shows a cookie icon in the menu bar of the website. Visitors can click the icon at any time to reopen the consent dialog and change their earlier decision. Enabling this option is strongly recommended: the GDPR requires that visitors can withdraw their consent as easily as they gave it.
| Name | Type | Default |
|---|---|---|
| boolean | false |
autoShowDialog
Opens the consent dialog automatically when a visitor loads a page and no consent cookie is found (first visit, expired cookie, or cleared browser data). If this option is disabled, the dialog opens only when it is requested explicitly — for example by clicking the cookie icon.
| Name | Type | Default |
|---|---|---|
| boolean | true |
reloadPageOnChange
Reloads the current page after the visitor has changed the cookie settings. The reload makes sure that all modules on the page — for example analysis or translation services — immediately respect the new consent state. The page is not reloaded if the visitor closed the dialog without changing anything.
| Name | Type | Default |
|---|---|---|
| boolean | true |
expireCookiesOnRequiredOnly
Improves GDPR compliance when the visitor allows only the required cookies. If the visitor refused the Analysis or the Personalization category, all persistent J1 cookies (user state, consent, translation) are shortened to session cookies. Session cookies are removed automatically when the browser is closed, and the GDPR does not require consent for session-only cookies.
| Name | Type | Default |
|---|---|---|
| boolean | true |
whitelisted
A list of page paths on which no consent dialog is opened, even if no consent cookie exists. Use this for pages that must stay reachable without any consent action — typically the Privacy page and the Legal Notice (imprint) page, which visitors must be able to read before they decide about cookies.
settings:
whitelisted:
- /pages/public/legal/privacy/
- /pages/public/legal/imprint/| Name | Type | Default |
|---|---|---|
| array | [] (empty) |
postSelectionCallback
The name of the JavaScript callback function that is called after the visitor has made a selection in the dialog. The default callback of the J1 Template applies the decision to the whole site: it manages the Google Analytics opt-in/opt-out, cleans up leftover tracking cookies, shortens persistent cookies when only required cookies are allowed, and reloads the page if the settings have changed. Only change this option if you provide your own callback function.
| Name | Type | Default |
|---|---|---|
| string | j1.adapter.cookieConsent.cbCookie |
Modal settings
All texts of the consent dialog are configured under the key modal_settings. To change a text, copy the key into the user file _data/modules/cookieconsent.yml under settings.modal_settings and set your own value. Keys you do not override keep their default text.
title
The headline shown at the top of the consent dialog.
| Name | Type | Default |
|---|---|---|
| string | Your Privacy |
body_text
The main text of the dialog. It explains in a few sentences why cookies are used and what the visitor can do. The text may contain simple HTML markup like <b> for bold text or <br> for line breaks.
| Name | Type | Default |
|---|---|---|
| string (may contain HTML) | English default text, see defaults file |
privacy_notice
The content of the Privacy Notice section. The section is hidden by default and is opened with the Show Privacy Notice toggle button in the dialog footer. The text usually describes the three cookie categories in detail and names the partner services involved. Like body_text, it may contain HTML markup — including lists (<ul>, <li>) and paragraphs (<p>).
| Name | Type | Default |
|---|---|---|
| string (may contain HTML) | English default text, see defaults file |
Labels (translation)
All short text strings of the dialog — the button labels, the section headings, and the bullet-point descriptions of the three cookie categories — live under the key modal_settings.labels. Overriding these keys in the user file is all that is needed to translate the complete dialog; no template files have to be edited.
# Example: German translation (excerpt)
settings:
modal_settings:
title: Ihre Privatsphäre
labels:
buttonAgree: Ich stimme zu
buttonDoNotAgree: Ich stimme nicht zu
buttonShowPrivacyNotice: Datenschutzhinweise anzeigen
buttonHidePrivacyNotice: Datenschutzhinweise ausblenden
buttonShowSettings: Einstellungen anzeigen
buttonHideSettings: Einstellungen ausblenden| The description keys ending in |
The two toggle buttons of the dialog footer use a pair of label keys each. The dialog picks the matching label automatically: while a section is closed the …Show… label is shown, while it is open the …Hide… label is shown. Both keys of a pair can be translated independently.
| Key | Default | Used for |
|---|---|---|
| Privacy Notice | Heading of the Privacy Notice section |
| Current settings | Heading of the detailed settings section |
| Necessary | Name of the Necessary category switch |
| 1 list item | Bullet points below the Necessary switch |
| Analysis | Name of the Analysis category switch |
| 3 list items | Bullet points below the Analysis switch |
| Personalization | Name of the Personalization category switch |
| 4 list items | Bullet points below the Personalization switch |
| I Do not Agree | Button that refuses all optional cookies |
| Show Privacy Notice | Privacy toggle button, section closed |
| Hide Privacy Notice | Privacy toggle button, section open |
| Show Settings | Settings toggle button, section closed |
| Hide Settings | Settings toggle button, section open |
| I Agree | Button that accepts all cookie categories |
| Save selection | Button that stores the current switch positions |
| Agree on all | Button that enables all categories at once |
| Close | Screen-reader label of the |