Joomla! Documentation™

This page is under construction. Please do not modify until this line is removed.

In some countries, there are legal requirements to issue a warning on websites when cookies are created.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it is necessary to provide appropriate notices.

A simple option is to install one of the many extensions that offer to present such a warning.

Unfortunately, this simple option hides certain risks.

• What exactly is being installed?
• How to remove the extension if it does not suit?
• Is there an uninstall function and is it complete or does it leave residues that affect the system?
• Does the extension even do something else that is not wanted?

All these risks do not exist if you create your own cookie warning. Moreover, you have full control and learn a lot about Joomla, HTML, CSS and JavaScript.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum. (This is the default interface)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed.

Presumably there is already a main menu and a few articles. (In a very fresh test installation the sample data could be installed).

Beginners don't have to worry, everything that is created can be deactivated and also deleted with a few mouse clicks.

So no more foreplay, let's get started.

Create a Site Module for the warning message

In administrator interface click Contents and besides Site Modules click the + sign. Or click Site Modules and then click New. This starts creation of a new module.

• Click Custom
• Enter a Module Title (for Example: Cookie Warning)
• In the editor field write a message. Let's start with: By using this site you accept cookies! (We are going to enhance this later)
• Select the Position main-top (That would be right under the page header before the content)
• Select to publish the warning. (If later anything gets messed up, just unpublish the module)
• Leave everything else in it's default settings and click Save & Close at the top of the page

That's it. We have our warning. After opening the site view of the Joomla Website in a new browser window the warning should be displayed.

Create a button to hide the message

The way the Cookie Warning works by now is, that it is shown on every page. So lets add a button to hide the message.

• Open the Site Module again under Content -> Site Modules -> Cookie Warning
• Below the editor field click the button Toggle Editor to switch the editor to display the HTML code of the cookie warning
• Now take the following code snippet and insert it below the existing message

<button class="btn btn-primary" onclick="
  document.getElementById('cookieWarnung').style.display='none';
  document.cookie='cookies=akzeptiert;max-age=315360000;path=/;'">

I accept

</button>
<script>
   if (document.cookie == 'cookies=akzeptiert')
      {document.getElementById('cookieWarning').style.display='none';}
</script>

Now click Toggle Editor again and the accept button should be visible. (It looks ugly, but the reason is, that the editor is not using Bootstrap) Click Save at the top of the page to store the change without closing the Modules: Custom page. Now swich to the browser viewing to the site view and refresh. You should not only see the warning, but also the button. After clicking it ...

Debugging the Cookie Warning

What happend? Nothing? Shouldn't the warning disappear when the button is clicked?

So in the browser open the developer tools. In firefox that is Shift+Ctrl+I. In the Inspector tab search for Cookie Warning. Check if the title, the message, the button and the script tag are all there. Should be fine.

Now check if the class cookieWarning is used. -- Ups, all kinds of classes, but no class named cookieWarning!

That is easy to solve:

• Open up the Site Module Cookie Warning again, if it is not still open.
• Select the Advanced tab.
• In the Module Class field enter cookieWarning
• Save the changes.
• Refresh your browser.

Now it should work! Great!

A big warning

There are templates out there which do not take all those attributes and convert it into HTML. That means, if you are using such templates you might get alot of trouble debugging your code and the template is just not showing it to the browser.

If you have a add-on template insstalled always have a hidden menu by hand (a menue which is defined and has at least one Menu Item), but which is not connected to any Template Position. (And therefore not shown on the website) Then have this Menu Item displayed in the Cassiopeia template. By typing the Alias of this Menu Item behind the domain name in the browsers address field, it is always possible to access this testpage with Cassiopeia template for debugging.