Joomla! Documentation - User contributions [en]

J4.x:Cookie Warning Tutorial

2022-10-30T10:42:58Z

Richard123:

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Suggestions etc==
'''Suggestions are always welcome!'''

Just do not directly enter it into the page. Rather switch to the talk page and write down your thoughts. Or send an email to the author.
Thanks

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. (The surrounding <p> and </p> tags define the text as a paragraph in HTML.)
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# The onclick contains two JavaScript commands, each terminated with a ; (semicolon).
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because the double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the name cookies and the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and then sets a marker in the users browser to remember that he accepted the cookies.

The next part is a HTML tag which defines it's content to be JavaScript. This JavaScript is executed every time the browser wants to display the Cookie Warning.

The JavaScript tag is composed from the following:

# The opening HTML <script> tag.
# An if statement with a test in the round brackets ().
# It tests for a cookie in the cache of the end users browser which is named cookies and has a content of accepted.
# If that cookie exists the test result ist positive (true) and the commands in the curly brackets are executed.
# In the curly braces is a command we already know. Hide the Cookie Warning.
# The closing HTML </script> tag.

So what all of this is doing: If there is no such cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it every time the end user is visiting the website.

===Start debugging===
In the browser open the developer tools. In FireFox that is done with the key combination: Shift+Ctrl+I

At the very top of the debuging window select the Inspector tab and search for Cookie Warning. Check if the title, the message, the button and the script tag are all there. Should be fine.

====Check if the cookie is created====
# Again at the very top of the debuging window select the Storage tab.
# Open the Cookies file
# Open your domain name, it should be there.
# In the content area there should be at least 2 cookies. One is the Joomla! cookie for tracking your session. The other should be the cookie just set by clicking the I accept button.

Everything is fine until now.
====Check if the class cookieWarning is used====
There is only one more thing. If the cookie is there, the JavaScript tag is not doing its job correct.
# Switch back to the Inspector tab of the debugging tools.
# Enter #cookieWarning into the search field and press Return to jump to the Cookie Warning.

-- Ups, an Error!
OK, let us try to enter Cookie Warning into the search field again. and analyse the HTML.

All kinds of classes, but no ID named cookieWarning!

That is easy to solve:
# Open up the Site Module Cookie Warning in the administator window again, if it is not still open.
# Toggle the editor to see the HTML code.
# Notice that the editor added some more <p>...</p> tags. No problem, if it likes to see everything as a paragraph.
# At the very top insert the following: <div id="cookieWarning">
# Right above the <script> tag insert: </div>
# So we gave our HTML a surrounding division tag with an ID of #cookieWarning.
# Save the changes.
# Refresh your browser end user browser window.

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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

JDOC:Joomla 4 Tutorials Project

2022-10-30T10:23:19Z

Richard123:

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|icon=joomla|icon-color=#5091cd|size=5x|text-color=#333|title=<translate> Joomla 4 Tutorials Project</translate>}}
<translate> This '''Joomla! Documentation Wiki Tutorial Project''' is focused on providing tutorials to help Beginners and Developers with the main changes of Joomla 4. The Joomla Docs Wiki is collaborative, community-contributed and maintained, anyone can get involved in the Joomla 4 Tutorials Project! There are many small tasks in this JDOC project that when combined together will help produce high quality tutorials for beginner and intermediate Joomla! developers. Show others your interest in the Joomla project, sign up to help with this Docs Wiki Project on the discussion page.</translate>
<div class="large-6 column">
{{section portal heading|icon=magic|title=<translate> Joomla 4 Tutorials Maintained</translate>}}
<translate>
== For Newcomers == </translate>
{{J4.x:Links:_Getting_Started/<translate> en</translate>}}
=== Articles ===
* [[S:MyLanguage/J4.x:Adding a New Article|<translate> Adding a New Article</translate>]]
* [[S:MyLanguage/J4.x:Deleting an Article|<translate> Deleting an Article</translate>]]
* [[S:MyLanguage/J4.x:Restricting_access_to_an_Article|<translate> Restricting access to an Article</translate>]]
* [[S:MyLanguage/J4.x:Scheduling_the_publication_of_an_article|<translate> Scheduling the Publication of an Article</translate>]]
* [[S:MyLanguage/J4.x:How_to_Archive_an_Article|<translate> How to Archive an Article</translate>]]
*[[S:MyLanguage/J4.x:How_to_Show_a_Calendar_Month_List_of_Archived_Articles_Using_a_Module|<translate> How to Show a Calendar Month List of Archived Articles Using a Module</translate>]]
{{J4.x:Links:_Media/<translate> en</translate>}}
=== Other ===
* [[S:MyLanguage/J4.x:How_To_Use_Content_Tags_in_Joomla|<translate> How To Use Content Tags in Joomla</translate>]]
* [https://domorewithcore.com/new-in-joomla-4-1 New in Joomla 4.1]
* [https://joomla-projects.github.io/joomla-a11y-checker/ JOOA11Y - The Joomla Accessibility Checker]
* [[J4.x:Cookie_Warning_Tutorial|Cookie Warning Tutorial]]
<translate>
== For Upgraders == </translate>

* [[S:MyLanguage/Potential backward compatibility issues in Joomla 4|<translate> Potential backward compatibility issues in Joomla 4</translate>]]
* [[S:MyLanguage/Joomla_3.x_to_4.x_Step_by_Step_Migration|<translate> Joomla 3.x to 4.x Step by Step Migration</translate>]]

<translate>
== For Maintainers == </translate>
* [[S:MyLanguage/J4.x:Adding_a_New_Menu|<translate>  Adding a New Menu</translate>]]
* [[S:MyLanguage/J4.x:Adding_a_menu_link_in_an_article|<translate> Adding a menu link in an article</translate>]]
* [[S:MyLanguage/J4.x:How_to_Create_a_Menu_Item_to_View_Archived_Articles|<translate> How to Create a Menu Item to View Archived Articles</translate>]]
* [[S:MyLanguage/J4.x:Adding_a_Custom_Administrator_Menu|<translate>  Adding a Custom Administrator Menu</translate>]]
* [[S:MyLanguage/WebAuthn_Passwordless_Login|<translate>  WebAuthn Passwordless Login</translate>]]
* [[S:MyLanguage/J4.x:Multi-factor_Authentication|<translate>  Multi-factor Authentication</translate>]]
* [[S:MyLanguage/J4.x:Workflow|<translate> Workflow</translate>]]
* [[S:MyLanguage/J4.x:Http_Header_Management|<translate> How to Use the New HTTP Header Management</translate>]]
* [[S:MyLanguage/J4.x:CLI_Database_Exporter_Importer|<translate> CLI Database Exporter Importer</translate>]]
* [[S:MyLanguage/J4.x:Improved_Override_Management|<translate> Improved Override Management</translate>]]
* [[S:MyLanguage/J4.x:Using Bootstrap Components in Joomla 4|<translate> Using Bootstrap Components in Joomla 4</translate>]]

<translate>
== For Developers == </translate>

* [[S:MyLanguage/J4.x:Creating_a_Plugin_for_Joomla|<translate> Creating a Plugin for Joomla 4</translate>]]
* [[S:MyLanguage/J4.x:Adding_an_API_to_a_Joomla_Component|<translate> Adding an API to a Joomla Component</translate>]]
* [[S:MyLanguage/J4.x:Creating_a_Simple_Module|<translate>  Creating a simple Module for Joomla 4</translate>]]
* [[S:MyLanguage/J4.x:Links:_MVC_Anatomy|<translate>  MVC Anatomy</translate>]]
* [[S:MyLanguage/J4.x:SCSS_and_Sass|<translate> SCSS and Sass</translate>]]
* [[S:MyLanguage/J4.x:Setting_Up_Your_Local_Environment|<translate> Setting up your local environment</translate>]]
* [[S:MyLanguage/Setting_up_Eclipse_PDT_2020_and_Git_for_Pulls|<translate> Setting up Eclipse PDT 2020 and Git for Pulls</translate>]]
* [[S:MyLanguage/Visual_Studio_Code_Primer|<translate> Visual Studio Code Primer</translate>]]
* [[S:MyLanguage/J4.x:Web_Assets|<translate> Web Assets</translate>]]
* [[S:MyLanguage/Adding changelog to your manifest file|<translate> Adding changelog to your manifest file</translate>]]
* [[S:MyLanguage/J4.x:Dependency_Injection_in_Joomla_4|<translate> Dependency Injection in Joomla 4</translate>]]
* [[S:MyLanguage/J4.x:Moving_Joomla_To_Prepared_Statements|<translate> Moving Joomla to Prepared Statements</translate>]]
* [[S:MyLanguage/J4.x:Namespace_Conventions_In_Joomla|<translate> Namespace conventions in Joomla 4</translate>]]
* [[S:MyLanguage/J4.x:Writing_A_CLI_Application|<translate> Writing a CLI Application with the new Console Package</translate>]]
** [[S:MyLanguage/J4.x:Cloud_File_Systems_for_Media_Manager|<translate> How to build a cloud file system plugin for the new Media Manager</translate>]]
<translate>
* Joomla 4's API: There are several pages documentation which you can find linked [[S:MyLanguage/Category:Joomla!_Api|in this Category on the Wiki]]</translate>
* [[S:MyLanguage/Deploying_an_Update_Server|<translate> Deploying an Update Server</translate>]]

<translate>
== For Documenters == </translate>

* [[S:MyLanguage/Help4.x:Help_screens|<translate> Joomla 4 Help Screens</translate>]]
* [[S:MyLanguage/Help4.x:Chunks|<translate>  Joomla 4 Chunks</translate>]]
* [[S:MyLanguage/J4.x:Doc_Pages|<translate>  Joomla 4 Doc Pages</translate>]]
* [[S:MyLanguage/J4.x:Help_pages|<translate>  Joomla 4 Help Pages</translate>]]
* [[S:MyLanguage/J3.x:Doc_Pages|<translate>  Joomla 3 Doc Pages</translate>]] <translate> (for comparison)</translate>
* [[S:MyLanguage/JDOC_Manual|<translate>  JDOC Manual</translate>]]
<translate>

* [[J4.x:Links:_Index|Links: Index]]

== Appendices == </translate>

<translate>=====Joomla 4.x Extensions - Simple working examples explained===== </translate>

* [[S:MyLanguage/J4 Plugin example - Table of Contents|<translate> J4 Plugin example - Table of Contents</translate>]]
* [[S:MyLanguage/J4 Component example - Mywalks|<translate> J4 Component example - Mywalks</translate>]] - <translate> Updated for Beta 4</translate>
* [[S:MyLanguage/J4 Module example - Mydownmsg|<translate> J4 Module example - Mydownmsg</translate>]]
* [[S:MyLanguage/J4 CLI example - Onoffbydate|<translate> J4 CLI example - Onoffbydate</translate>]]

* [[J4.x:Tips and Tricks for Joomla 4 Developers|<translate> Tips and Tricks for Joomla 4 Developers</translate>]]

</div>
<div class="large-6 column">
{{section portal heading|icon=check-square|title=<translate> To Do List</translate>}}
<translate> These are a few 'to do's' to get this project startedː</translate>
<translate>
* How to use the new Publishing Workflow
* How to create an accessible template
* How to test the accessibility of an extension
* [[S:MyLanguage/J4.x:Developing_an_MVC_Component|Developing an MVC component]]
* Joomla! 4 Component Development Tutorial
</translate>
<translate>

* What's changed in Joomla 4? (vs backwards compatibility)
* Custom Admin User Dashboards
</translate>
<translate>

* Plugin: System - Additional Accessibility Features
* Upgrading Joomla 4: Pre Update Check
</translate>
<translate>

* Making a language pack for Joomla 4 ([[J3.x:Making a Language Pack for Joomla|J3 version]])
</translate>
== Templates ==
* [[J4.x:Cassiopeia Template Folders and Files|Cassiopeia Template Folders and Files]]
* [[J4.x:Cassiopeia Template Customisation|Cassiopeia Template Customisation]] - using the Edit Style form and user.css
* [[J4.x:Cassiopeia Template Simplified - A Case Study|Cassiopeia Template Simplified - A Case Study]] - a simple template based on Cassiopeia
* [https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks Community Magazine: Cassiopeia Template – Tips & Tricks]
* Atum Template - Back End Template for Joomla 4
* HTML Mail Templates

== Joomla 4 User Manual Experiment ==

* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Getting_Started|<translate> Getting Started</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Problems|<translate> Problems</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Dashboards|<translate> Dashboards</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Articles|<translate> Articles</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Workflows|<translate> Workflows</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Fields|<translate> Fields</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Media|<translate> Media</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Modules|<translate> Modules</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Menus|<translate> Menus</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Banners|<translate> Banners</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Contacts|<translate> Contacts</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Multilingual_Associations|<translate> Multilingual Associations</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#News_Feeds|<translate> News Feeds</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Smart_Search|<translate> Smart Search</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Tags|<translate> Tags</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#Users|<translate> Users</translate>]]
* [[S:MyLanguage/J4.x:Joomla_4_User_Manual#System|<translate> System</translate>]]

</div>
<div class="large-12 column">{{section portal heading|icon=plus|title=<translate> Join This JDOC Project</translate>}}{{JDOC:Beginners_Tutorial_Project/Get Involved/<translate> en</translate>}}
</div>
<div class="large-6 column">
{{section portal heading|icon=question|title=<translate> FAQ</translate>}}{{JDOC:Developer_Tutorials_Project/FAQs/<translate> en</translate>}}
</div>
<div class="large-6 column">
{{section portal heading|icon=group|title=<translate> Members of this Project</translate>}}
<translate>
==Members== 
</translate>
*[[User:Sandra97|Sandra Decoux]]
*[[User:Hutchy68|Tom Hutchison]]
*[[User:MartijnM|Martijn Maandag]]
*[[User:M-b-o|Mike Brandner, Teamlead JDocs]]
*[[User:Wilsonge|George Wilson, Joomla 4 Release Lead]]
*[[User:Partic|Patrick Jackson]]
{{section portal heading|icon=book|title=<translate> News</translate>}}
<translate> The JDOC Joomla 4 Tutorials Project was started on Sat, 08 Dec 2018 in an effort to benefit the users of the Joomla! Documentation Wiki.</translate>
</div>

__NOTOC__
<noinclude>
[[Category:JDOC Projects{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>
__NOEDITSECTION__

J4.x:Cookie Warning Tutorial

2022-10-30T09:06:25Z

Richard123: /* Check if the class cookieWarning is used */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. (The surrounding <p> and </p> tags define the text as a paragraph in HTML.)
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# The onclick contains two JavaScript commands, each terminated with a semicolon ";".
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because the double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the name cookies and the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and then sets a marker in the users browser to remember that he accepted the cookies.

The next part is a HTML tag which defines it's content to be JavaScript. This JavaScript is executed every time the browser wants to display the Cookie Warning.

The JavaScript tag is composed from the following:

# The opening HTML <script> tag.
# An if statement with a test in the round brackets ().
# It tests for a cookie in the cache of the end users browser which is named cookies and has a content of accepted.
# If that cookie exists the test result ist positive (true) and the commands in the curly brackets are executed.
# In the curly braces is a command we already know. Hide the Cookie Warning.
# The closing HTML </script> tag.

So what all of this is doing: If there is no such cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it every time the end user is visiting the website.

===Start debugging===
In the browser open the developer tools. In FireFox that is done with the key combination: Shift+Ctrl+I

At the very top of the debuging window select the Inspector tab and search for Cookie Warning. Check if the title, the message, the button and the script tag are all there. Should be fine.

====Check if the cookie is created====
# Again at the very top of the debuging window select the Storage tab.
# Open the Cookies file
# Open your domain name, it should be there.
# In the content area there should be at least 2 cookies. One is the Joomla! cookie for tracking your session. The other should be the cookie just set by clicking the I accept button.

Everything is fine until now.
====Check if the class cookieWarning is used====
There is only one more thing. If the cookie is there, the JavaScript tag is not doing its job correct.
# Switch back to the Inspector tab of the debugging tools.
# Enter #cookieWarning into the search field and press Return to jump to the Cookie Warning.

-- Ups, an Error!
OK, let us try to enter Cookie Warning into the search field again. and analyse the HTML.

All kinds of classes, but no ID named cookieWarning!

That is easy to solve:
# Open up the Site Module Cookie Warning in the administator window again, if it is not still open.
# Toggle the editor to see the HTML code.
# Notice that the editor added some more <p>...</p> tags. No problem, if it likes to see everything as a paragraph.
# At the very top insert the following: <div id="cookieWarning">
# Right above the <script> tag insert: </div>
# So we gave our HTML an ID of #cookieWarning.
# Save the changes.
# Refresh your browser end user browser window.

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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T09:00:26Z

Richard123: /* Now start debugging */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. (The surrounding <p> and </p> tags define the text as a paragraph in HTML.)
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# The onclick contains two JavaScript commands, each terminated with a semicolon ";".
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because the double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the name cookies and the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and then sets a marker in the users browser to remember that he accepted the cookies.

The next part is a HTML tag which defines it's content to be JavaScript. This JavaScript is executed every time the browser wants to display the Cookie Warning.

The JavaScript tag is composed from the following:

# The opening HTML <script> tag.
# An if statement with a test in the round brackets ().
# It tests for a cookie in the cache of the end users browser which is named cookies and has a content of accepted.
# If that cookie exists the test result ist positive (true) and the commands in the curly brackets are executed.
# In the curly braces is a command we already know. Hide the Cookie Warning.
# The closing HTML </script> tag.

So what all of this is doing: If there is no such cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it every time the end user is visiting the website.

===Start debugging===
In the browser open the developer tools. In FireFox that is done with the key combination: Shift+Ctrl+I

At the very top of the debuging window select the Inspector tab and search for Cookie Warning. Check if the title, the message, the button and the script tag are all there. Should be fine.

====Check if the cookie is created====
# Again at the very top of the debuging window select the Storage tab.
# Open the Cookies file
# Open your domain name, it should be there.
# In the content area there should be at least 2 cookies. One is the Joomla! cookie for tracking your session. The other should be the cookie just set by clicking the I accept button.

Everything is fine until now.
====Check if the class cookieWarning is used====
There is only one more thing. If the cookie is there, the JavaScript tag is not doing its job correct.
# Switch back to the Inspector tab of the debugging tools.
# Enter #cookieWarning into the search field and press Return to jump to the Cookie Warning.

-- Ups, an Error!
OK, let us try to enter Cookie Warning into the search field again. and analyse the HTML.

All kinds of classes, but no ID named cookieWarning!

That is easy to solve:
# Open up the Site Module Cookie Warning in the administator window again, if it is not still open.
# Toggle the editor to see the HTML code.
# Notice that the editor added some more <p>...</p> tags. No problem, if it likes to see everything as a paragraph.
# At the very top insert the following: <div id="cookieWarning">
# Right above the <script> tag insert: </div>
# So we gave our HTML a ID of #cookieWarning.
# Save the changes.
# Refresh your browser end user browser window.

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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T08:08:45Z

Richard123: /* Before debugging, take a brief look at what the code is doing */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. (The surrounding <p> and </p> tags define the text as a paragraph in HTML.)
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# The onclick contains two JavaScript commands, each terminated with a semicolon ";".
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because the double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the name cookies and the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and then sets a marker in the users browser to remember that he accepted the cookies.

The next part is a HTML tag which defines it's content to be JavaScript. This JavaScript is executed every time the browser wants to display the Cookie Warning.

The JavaScript tag is composed from the following:

# The opening HTML <script> tag.
# An if statement with a test in the round brackets ().
# It tests for a cookie in the cache of the end users browser which is named cookies and has a content of accepted.
# If that cookie exists the test result ist positive (true) and the commands in the curly brackets are executed.
# In the curly braces is a command we already know. Hide the Cookie Warning.
# The closing HTML </script> tag.

So what all of this is doing: If there is no such cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it every time the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:45:20Z

Richard123: /* Create a button to hide the message */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. (The surrounding <p> and </p> tags define the text as a paragraph in HTML.)
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:38:47Z

Richard123: /* Create a button to hide the message */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field: <p>By using this site you accept cookies!</p>. The surrounding <p> and </p> tags define the text as a paragraph in HTML.
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now copy the following code snippet below the existing text of the message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window showing the site view and refresh. You should not only see the warning, but also the button. (Refreshing may be done by clicking the circular icon or by pressing the F5 key. If it does not help try pressing Ctrl-F5.)

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:29:18Z

Richard123: /* The installation of extensions bears certain risks */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

Browser specifics in this tutorial refer to FireFox in a fairly current version.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field shows the text surrounded by <p> ... </p> tags. They define the text as a paragraph in HTML.
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now take the following code snippet and insert it below the existing message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:24:03Z

Richard123: /* Create a button to hide the message */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Notice the text in the editor field shows the text surrounded by <p> ... </p> tags. They define the text as a paragraph in HTML.
# Add a Return or new line at the end of the existing code. Maybe add another one to make it look better.
# Now take the following code snippet and insert it below the existing message.
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

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

We will discuss later what this code exactly is doing.

# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:16:03Z

Richard123: /* Create a Site Module for the warning message */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

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. (A module is a small component, which generates output on a Joomla! web page. A Site Module creates output for the end users. An Administrtor Module would create outbut in the administration interface.)

# Click Custom to create a Custom Site Module.
# 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.)
# To define where to display the warning in the web page 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-30T06:08:58Z

Richard123: /* Introduction */

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The article [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session and other information of visitors. Therefore, it might be necessary to provide appropriate notices. The Joomla! Framework itself does not include a feature to display cookie warnings.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?
* Does the extension cost extra money and how much, once or repeating?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla!, HTML, CSS, JavaScript and the browser would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users in Joomla! 4.

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. That way restoring the original state and leaving no residues.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

Cookie Warning Tutorial

2022-10-28T22:05:20Z

Richard123: Richard123 moved page Cookie Warning Tutorial to J4.x:Cookie Warning Tutorial: This tutorial is about Joomla 4

#REDIRECT [[J4.x:Cookie Warning Tutorial]]

J4.x:Cookie Warning Tutorial

2022-10-28T22:05:19Z

Richard123: Richard123 moved page Cookie Warning Tutorial to J4.x:Cookie Warning Tutorial: This tutorial is about Joomla 4

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-28T21:56:58Z

Richard123:

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>
[[Category:Tutorials]]
[[Category:Beginners]]
[[Category:Joomla! 4.x]]
</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-28T21:35:44Z

Richard123: /* To be continued */

{{version/tutor|4.x}}
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

<noinclude>[[Category:Tutorials]]</noinclude>

J4.x:Cookie Warning Tutorial

2022-10-28T21:26:03Z

Richard123: /* Now start debugging */

J4.x:Cookie Warning Tutorial

2022-10-28T21:24:33Z

Richard123: /* Before debugging, take a brief look at what the code is doing */

{{version/tutor|4.x}}
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
# There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
# Following is an onclick="" attribute.
# There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
# The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
# The second statement sets a cookie in the clients browser with the content accepted.
# Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

# The starting HTML <script> tag.
# An if statement whith test in the round brackets ().
# It tests for a cookie in the browser of the end user which says accepted.
# If that cookie exists, it executes the commands in the curly brackets.
# And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T21:21:27Z

Richard123: /* Create a button to hide the message */

{{version/tutor|4.x}}
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# Now take the following code snippet and insert it below the existing message. (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
# Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement whith test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T21:17:18Z

Richard123: /* Create a Site Module for the warning message */

{{version/tutor|4.x}}
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# Click Custom to create a Custom Site Module.
# 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. Only published components are seen by end users.)
# 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 source code of the cookie warning.
# * Now take the following code snippet and insert it below the existing message (Maybe a
Carrige Return is needed to open a new line).
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
#* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement whith test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T21:08:32Z

Richard123:

{{version/tutor|4.x}}
{{inuse}}
Please leave this note until the didactic concept and structure of this tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla! administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla! automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla! itself does not offer such a feature.

A simple option would be to install one of the many Joomla! extensions that offer to present such a warning. {{jsite|ext}} is the official Joomla! Extensions Directory<sup>TM</sup>. The word cookie entered into the search field of this page will provide a multitude of free or paid extensions to handle cookies.

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* Does the extension conflict with other installed extensions?
* 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?
* How does the extension behave in the next major upgrade?
* Will the extension still be supported in the next version?

All these risks would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla! Version 4.x (in short J4) is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for J4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla! 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
# * Click Custom to create a Custom Site Module.
# * 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. Only published components are seen by end users.)
# * 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 source code of the cookie warning.
# * Now take the following code snippet and insert it below the existing message (Maybe a
Carrige Return is needed to open a new line).
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
#* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement whith test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T18:55:58Z

Richard123:

{{inuse}}
Please leave this note until the didactic concept and structure of the tutorial are completed. The author is working on different parts of this document over several days. Once it is completed, the note will be set to Review.
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 13:55, 28 October 2022 (CDT)

==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement whith test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

User talk:Max123kl

2022-10-28T18:09:32Z

Richard123: /* Übersetzungsbenachrichtigung: J3.x:Upgrading from Joomla 3.4.x to 3.5 */

== Hallo Max ==

Du hast mein Tutorial editiert und die erste Zeile verändert. Ich vermute, es war in guter Absicht.

Leider hast Du einen Aufruf hineingesetzt, der andere auffordert an dem Dokument mitzuschreiben. Dies mag eine gute Idee sein, wenn es darum geht in einer Hilfeseite einzelne Menüpunkte oder Felder in einem Formular zu beschreiben.

Aber ich denke, bei einem Tutorial, in dem es um ein didaktisches Konzept geht ist dies kontraproduktiv. Es kann nicht angehen, dass ich am Ende des Dokuments Aussagen schreibe, die sich auf den Anfang beziehen und gleichzeitig ändert jemand anderes die an den Anfang gestellten Voraussetzungen ab.

Ich möchte gern, dass das Tutorial für Änderungen gesperrt bleibt, bis die Struktur und das didaktische Konzept fertig gestellt sind.

Deshalb möchte ich den Header wieder zurück ändern.

Gruß Richard

== Übersetzungsbenachrichtigung: J3.x:Upgrading from Joomla 3.4.x to 3.5 ==

<div lang="de" class="mw-content-ltr">Hallo Max123kl,

du erhältst diese E-Mail, da du dich als Übersetzer(in) für Deutsch und German (formal address) auf Joomla! Documentation registriert hast.
Die Seite [[J3.x:Upgrading from Joomla 3.4.x to 3.5]] ist zum Übersetzen vorhanden. Du kannst sie hier übersetzen:
* [https://docs.joomla.org/index.php?title=Special:Translate&group=page-J3.x%3AUpgrading+from+Joomla+3.4.x+to+3.5&language=de übersetzen in Deutsch]
* [https://docs.joomla.org/index.php?title=Special:Translate&group=page-J3.x%3AUpgrading+from+Joomla+3.4.x+to+3.5&language=de-formal übersetzen in German (formal address)]

Übersetzungspriorität dieser Seite: hoch.
Frist zur Übersetzung der Seite: 2016-03-16.

<div lang="en" class="mw-content-ltr">Hello,

This is an urgent page to translate in a maximum of languages and before March 16th.
Thanks for the help.

If you know friends able to translate it in other languages, Thank you to let them know how to help.

Regards,
MATsxm</div>

Deine Hilfe wird sehr geschätzt. Übersetzer wie du helfen dabei, dass Joomla! Documentation
als wirklich mehrsprachige Gemeinschaft fungiert.

Vielen Dank,
die Übersetzungskoordinatoren von Joomla! Documentation&lrm;, 13:25, 12 March 2016 (CST)</div>

{{Translator welcome}}
([[User:Sandra97|Sandra97]] ([[User talk:Sandra97|talk]]) 15:19, 15 May 2017 (CDT))

=== Note to your comment on [[J3.x:Installing_Joomla]] ===
Please use the '''Talk pages''' to leave comments on pages and about their content - not directly in the content of the page. I saw your comment and took it back. It makes the handling of translations too complex. Thanks for your hint. We will take it into account when revising the page.<br />
[[User:M-b-o|m-b-o (Mike Brandner)]] ([[User talk:M-b-o|talk]]) 17:45, 16 May 2020 (CDT)

J4.x:Cookie Warning Tutorial

2022-10-28T09:13:58Z

Richard123: /* Before debugging, take a brief look at what the code is doing */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement whith test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.

===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T09:06:48Z

Richard123: /* Create a button to hide the message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;';
">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T08:51:26Z

Richard123: /* Create a button to hide the message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" type="button" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T08:14:25Z

Richard123: /* Create a button to hide the message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needed to open a new line.)
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T08:09:32Z

Richard123: /* Create a Site Module for the warning message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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. (A module is a small component, which generates output on a Joomla web page.)
* Click Custom to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needet to open a new line.)
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T08:04:27Z

Richard123: /* The installation of extensions bears certain risks */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for end users and Joomla 4.

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. That way restoring the original state.

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 to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needet to open a new line.)
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

User talk:Richard123

2022-10-28T07:57:44Z

Richard123: /* Question to the experienced members */

==Question to the experienced members==
I already found out, that when I select the This is a minor change Check box, my contributions are marked with the symbol m. I will keep doing this until my [[Cookie Warning Tutorial]] is ready to be reviewed.

And while you are at it, is my writing style etc. OK?

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 01:07, 28 October 2022 (CDT)

==Welcome to the volunteers==
You can create and publish a new page, just like in any wiki.

MarkRS has already shown you, what I think is the wrong way, to contribute here.

I have had quite different experiences than MarkRS. I do not know his attempts to establish contacts. However, I started with translations first. A good way to communicate at this time is Glip (there are some plans to switch to another service provider).</br>
https://docs.joomla.org/RingCentral_(Glip)

Your own userspace is excellent as a playground to test the design of a new page, but is fundamentally unsuitable to bring the Joomla documentation forward.
In the Joomla documentation there are a lot of "style guides" which support you and help to avoid unnecessary errors:</br>
https://docs.joomla.org/Category:Documentation_Wiki_Information</br>
https://docs.joomla.org/Portal:Participating_in_the_Community</br>
https://docs.joomla.org/JDOC:How_to_Contribute_to_Joomla!_Documentation

If you have specific questions, then contact one of the administrators:</br>
https://docs.joomla.org/Special:ListUsers?username=&group=sysop&wpsubmit=&wpFormIdentifier=mw-listusers-form&limit=500

You can find the contact data either on the JDOC user pages (please click the name) or in the "Joomla! Volunteers Portal" in the tab "Joomlers". A separate registration is necessary there.</br>
BTW: The user "M-b-o" (Mike Brander) is the current "Teamlead Joomla Documentation".

[[User:Max123kl|Max123kl]] ([[User talk:Max123kl|talk]]) 07:36, 27 October 2022 (CDT)

===I already started writing my tutorial===
You may find it under /Cookie_Warning_Tutorial

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 11:03, 27 October 2022 (CDT)

J4.x:Cookie Warning Tutorial

2022-10-28T07:45:13Z

Richard123: /* Create a button to hide the message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for and users and Joomla 4.

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. That way restoring the original state.

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 to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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 source code of the cookie warning
*Now take the following code snippet and insert it below the existing message (Maybe a Carrige Return is needet to open a new line.)
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarning').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
* Now click Toggle Editor again and the I accept button should be visible. (If it looks ugly, 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 switch to the browser window viewing the site view and refresh. You should not only see the warning, but also the button.

After clicking the button ...

==Debugging the Cookie Warning==
What happend? Nothing? Shouldn't the warning disappear when the button is clicked?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T07:31:10Z

Richard123: /* Create a Site Module for the warning message */

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for and users and Joomla 4.

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. That way restoring the original state.

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 to create a Custom Site Module.
* 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. Only published components are seen by end users.)
* 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
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarnung').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
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?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-28T07:24:06Z

Richard123:

====This page is under construction. Please do not modify until this line is removed.====
[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 02:24, 28 October 2022 (CDT)
==Abstract==
This tutorial guides new Joomla administrators step-by-step through the implementation of a Custom Site Module. Along the way, simple HTML, CSS, JavaScript and testing options are explained.

==Introduction==
In some countries, there are legal requirements to issue a warning on websites when cookies are created. The page [[Cookie notification]] explains what a cookie is.

Joomla automatically creates such cookies to track the session of visitors. Therefore, it might be necessary to provide appropriate notices. Joomla itself does not offer such a feature.

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

===The installation of extensions bears certain risks===

* What exactly is being installed?
* How does the extension influence the rest of the system?
* 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 would not exist creating an own cookie warning. Moreover, full control and learning a lot about Joomla, HTML, CSS and JavaScript would be the outcome.

This tutorial assumes that Joomla version 4 is installed and the administrator has a rough overview of the administration interface Atum, which is the default backend template for Joomla 4. (This tutorial should also be suitable for older Joomla versions, but is not tested in this context.)

Even though there are not so many differences in the procedure, this tutorial assumes that no extensions are installed. This means that the end user interface is Cassiopeia, the default site template for and users and Joomla 4.

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. That way restoring the original state.

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
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarnung').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
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?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

User talk:Richard123

2022-10-28T06:07:21Z

Richard123: /* Welcome to the volunteers */

==Question to the experienced members==
Is that right, that when I modify a page and select the This is a minor edit checkbox before saving the changes, that you do not get alerted? I am asking because I do not want to disturb with every check-in until the first final version of the /Cookie_Warning_Tutorial is ready to be reviewed.

And while you are at it, is my writing style etc. OK?

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 01:07, 28 October 2022 (CDT)
==Welcome to the volunteers==
You can create and publish a new page, just like in any wiki.

MarkRS has already shown you, what I think is the wrong way, to contribute here.

I have had quite different experiences than MarkRS. I do not know his attempts to establish contacts. However, I started with translations first. A good way to communicate at this time is Glip (there are some plans to switch to another service provider).</br>
https://docs.joomla.org/RingCentral_(Glip)

Your own userspace is excellent as a playground to test the design of a new page, but is fundamentally unsuitable to bring the Joomla documentation forward.
In the Joomla documentation there are a lot of "style guides" which support you and help to avoid unnecessary errors:</br>
https://docs.joomla.org/Category:Documentation_Wiki_Information</br>
https://docs.joomla.org/Portal:Participating_in_the_Community</br>
https://docs.joomla.org/JDOC:How_to_Contribute_to_Joomla!_Documentation

If you have specific questions, then contact one of the administrators:</br>
https://docs.joomla.org/Special:ListUsers?username=&group=sysop&wpsubmit=&wpFormIdentifier=mw-listusers-form&limit=500

You can find the contact data either on the JDOC user pages (please click the name) or in the "Joomla! Volunteers Portal" in the tab "Joomlers". A separate registration is necessary there.</br>
BTW: The user "M-b-o" (Mike Brander) is the current "Teamlead Joomla Documentation".

[[User:Max123kl|Max123kl]] ([[User talk:Max123kl|talk]]) 07:36, 27 October 2022 (CDT)

===I already started writing my tutorial===
You may find it under /Cookie_Warning_Tutorial

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 11:03, 27 October 2022 (CDT)

J4.x:Cookie Warning Tutorial

2022-10-27T16:54:58Z

Richard123: /* Create a button to hide the message */

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
<source lang="xml">
<button class="btn btn-primary" onclick="
document.getElementById('cookieWarnung').style.display='none';
document.cookie='cookies=accepted;max-age=315360000;path=/;'">

I accept

</button>
<script>
if (document.cookie == 'cookies=accepted')
{document.getElementById('cookieWarning').style.display='none';}
</script>
</source>
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?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-27T16:52:21Z

Richard123: /* Debugging the Cookie Warning */

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
<source lang="xml">
<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>
</source>
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?
===Before debugging, take a brief look at what the code is doing===
*There is a HTML button tag with the attribute class="btn btn-primary" (these classes are used by bootstrap to format a nice button in the primary color).
*Following is an onclick="" attribute.
*There are two JavaScript commands, each terminated with a semicolon ";" inside of the onclick attribute.
*The first statement finds the HTML Tag with the ID #cookieWarning and gives it a CSS style of display: none; (it is in single quotes, because die double quotes are already used by the onclick="" surrounding it.
*The second statement sets a cookie in the clients browser with the content accepted.
*Last, the button gets a label of I accept and the HTML closing tag for the button.
So when the button is clicked by the end user, it finds the container of the Cookie Warning by looking for its ID, hides this from the user and than sets a marker in the uses browser to remember that he accepted the cookies.

The next part is a HTML tag which includes JavaScript. It is executed every time the brouser wants to display the Cookie Warning.

*The starting HTML <script> tag.
*An if statement which test in the round brackets ()
*It tests for a cookie in the browser of the end user which says accepted.
*If that cookie exists, it executes the commands in the curly brackets.
*And that command wie already know. Hide the Cookie Warning.

So what all of this is doing: If there is no cookie in the end users browser, it displays the warning on every page displayed. If somewhen the user gets bored and clicks the button it hides the warning and remembers to hide it everytime the end user is visiting the website.
===Now start debugging===
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 installed 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.

==To be continued==

User talk:Richard123

2022-10-27T16:03:48Z

Richard123: /* Welcome to the volunteers */

==Welcome to the volunteers==
You can create and publish a new page, just like in any wiki.

MarkRS has already shown you, what I think is the wrong way, to contribute here.

I have had quite different experiences than MarkRS. I do not know his attempts to establish contacts. However, I started with translations first. A good way to communicate at this time is Glip (there are some plans to switch to another service provider).</br>
https://docs.joomla.org/RingCentral_(Glip)

Your own userspace is excellent as a playground to test the design of a new page, but is fundamentally unsuitable to bring the Joomla documentation forward.
In the Joomla documentation there are a lot of "style guides" which support you and help to avoid unnecessary errors:</br>
https://docs.joomla.org/Category:Documentation_Wiki_Information</br>
https://docs.joomla.org/Portal:Participating_in_the_Community</br>
https://docs.joomla.org/JDOC:How_to_Contribute_to_Joomla!_Documentation

If you have specific questions, then contact one of the administrators:</br>
https://docs.joomla.org/Special:ListUsers?username=&group=sysop&wpsubmit=&wpFormIdentifier=mw-listusers-form&limit=500

You can find the contact data either on the JDOC user pages (please click the name) or in the "Joomla! Volunteers Portal" in the tab "Joomlers". A separate registration is necessary there.</br>
BTW: The user "M-b-o" (Mike Brander) is the current "Teamlead Joomla Documentation".

[[User:Max123kl|Max123kl]] ([[User talk:Max123kl|talk]]) 07:36, 27 October 2022 (CDT)

===I already started writing my tutorial===
You may find it under /Cookie_Warning_Tutorial

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 11:03, 27 October 2022 (CDT)

J4.x:Cookie Warning Tutorial

2022-10-27T15:19:11Z

Richard123: /* A big warning */

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
<source lang="xml">
<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>
</source>
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 installed 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.

==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-27T15:17:34Z

Richard123: /* Debugging the Cookie Warning */

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
<source lang="xml">
<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>
</source>
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.
==To be continued==

J4.x:Cookie Warning Tutorial

2022-10-27T14:54:34Z

Richard123: /* Create a Site Module for the warning message */

J4.x:Cookie Warning Tutorial

2022-10-27T13:01:00Z

Richard123: Created page with "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..."

User:Richard123

2022-10-27T11:34:15Z

Richard123: Created page with "Welcome to my user profile. My name is Richard, I am using Joomla since 2016 for my company website. Before joining the Joomla Family I tried alot of other major web framewor..."

Welcome to my user profile.

My name is Richard, I am using Joomla since 2016 for my company website.
Before joining the Joomla Family I tried alot of other major web frameworks.

Joomla convinced me because it is flexible for all kinds of task. Besides that the implemented MVC concept seemed to be good supported. Seemed, because the out of the box site templates really try to keep any controler functionallity out.

I later found out that this only applies to the templates provided in the installation package. All major template provider do exactly the opposite. They pack as much additional functionality into their templates as possible. I in fact can only guess what their reasons for doing so are...

Anyways, I sticked to Joomla, short time ago upgraded to J4 and am happy with the evolution (however, a lot of patience was required).

To give some of my experience back to the community I just joined the Joomla documentation site.

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 06:34, 27 October 2022 (CDT)

As you might tell already, I like to write ;-)
And I am always interested in free html, css, scss only templates. Maybe with JavaScript or a Design Framework like Bootstrap.

JDOC talk:Joomla 4 Tutorials Project

2022-10-27T10:30:19Z

Richard123:

'''Sorry for contacting this way, I did not find any other way.'''

I registered to contribute a simple tutorial on how to implement a cookie warning as a custom site plugin, without installing any extensions. Besides getting the cookie warning up and running, such a tutorial would demonstrate how simple it is to extend Joomla without modifying template sources or installing anything (both might scare newbees).

I did not find a way to add a new tutorial though. May anyone give advice on how to get started? Later I could also write a tutorial on how to get involved in writing tutorials ;-)

Thanks, Richard

[[User:Richard123|Richard123]] ([[User talk:Richard123|talk]]) 05:30, 27 October 2022 (CDT)

[[User:GregJPreece|GregJPreece]] ([[User talk:GregJPreece|talk]]) 21:01, 3 January 2020 (CST) MVC Component Tutorial

I've been considering rewriting the component tutorial for Joomla 3.x, as many elements of it need modernising, and I really don't like the way it still uses legacy class names. If J4 is on the way and needs a similar tutorial, it seems sensible to start there.

---

Yes, please do. I’ve been holding off working my way through it as it seamed dated to a degree.

If you want a reviewer for the changes, I’d be up for it.

---

Cool, thank you. I'll get started soon. My first component is making its way into the JED right now, so I'll be working on J4 compatibility for that in the next release. I'll write the docs here as I go.

---
Great - I look forward to helping out!

---
How's this progressing? It's a page I (desperately) need, so I would be willing to help, if that's of any use.
I decided my next project would be a handy way to get into J4... so here I am, desperate.
[[User:MarkRS|MarkRS]] ([[User talk:MarkRS|talk]]) 15:32, 8 September 2020 (CDT)