After the successful implementation of Enplated Framework into your site, you first need to set up the config file correctly.
See the beginning of the config file. You will see a few lines that set the basic import options.
var enplatedSettingsCustom = {
useDarkMode : false,
importFlash : true,
importAOS : true,
...
}
By setting the useDarkMode variable to true / false, you can set the use of dark mode for the web. The following theme is used for dark mode.
You can enable import for Flash messages by setting the importFlash variable to true / false. You can learn more in 3. Flash Messages.
By setting the importAOS variable to true / false, you can enable import for the AOS library.
Then you don't have to deal with importing AOS files and executing them when initializing the library, just insert the corresponding properties to the animation element.
You can use smart variables to set cool features of your website and make your work easier.
Add a new variable smartVars to the enplatedSettingsCustom section. You can then use the key-value method to create the variables.
var enplatedSettingsCustom = {
...
smartVars : {
"enp-title" : "Enplated",
"enp-description" : "Enplated is a free and open source template engine. It is designed to be easy to use and fast.",
},
...
}
Now add the enpVar attribute to your element with the name of the key you used.
<h2 enpVar="enp-title"></h2>
<p enpVar="enp-description"></p>
During the page rendering process, the variables will be displayed in the element.
This feature allows you to use frequently repeated text multiple times (such as titles, labels, etc.) without using server-side variables.
If you need to set multiple properties for one element (in this case, for example, for AOS animations) and you want to manage these properties in a single set, using the data setter functions can be very useful.
Imagine you need to create the following HTML block:
<h1 data-aos="zoom-in" data-aos-delay="300">Lorem</h1>
<p data-aos="zoom-in" data-aos-delay="300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus.</p>
<p data-aos="zoom-in" data-aos-delay="300">Fusce suscipit libero eget elit.</p>
As we can see the data-aos="zoom-in" data-aos-delay="300" part keeps repeating over and over again. If a change is needed, it will be time consuming to change all the attributes.
But if we give all elements a single identifier, we can add a new setter in the Enplated configuration file, which will make the code easier to manage.
<h1 class="basic-animation">Lorem</h1>
<p class="basic-animation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus.</p>
<p class="basic-animation">Fusce suscipit libero eget elit.</p>
var enplatedSettingsCustom = {
...
dataSetter : {
basicAnimation : {
selector : ".basic-animation",
"data-aos" : "zoom-in",
"data-aos-delay" : "300",
},
...
},
...
}
Each object in the setter must contain the selector property. In it, we will provide a valid entry to select using the querySelector function. Then we specify all the attributes and their values to be set for the element.
If we want, we can create more setters - it's up to us how many. Of course, we can also use other attributes, such as class.
var enplatedSettingsCustom = {
...
dataSetter : {
basicAnimation : {
selector : ".basic-animation",
"data-aos" : "zoom-in",
"data-aos-delay" : "300",
},
anotherAnimation : {
selector : ".another-style",
"data-aos" : "fade-up",
"data-aos-delay" : "300",
"class" : "mt-5",
},
...
},
...
}
<h1 class="basic-animation">Lorem</h1>
<p class="another-style">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus.</p>
<p class="another-style">Fusce suscipit libero eget elit.</p>
Flash messages are a great way to inform users about the status of the application, actions performed, etc.
Don't you wanna check it out?
Creating a Flash message is very simple. The basic command looks like this:
genFlashMessage(message, type, time);The message variable indicates the actual message to be displayed. It is of course also possible to use HTML or styling.
The type variable indicates the type of message. It can be success, error, warning or info (take a look at the sample above).
The duration variable indicates the duration of the message display in milliseconds.
Because creating modal windows is a quite complex process, you can find the full code for the entire modal window below. Then the individual lines, what they do and what can be set will be explained.
var bootstrapTestModal = {
global : {
closable : true, //true | false
size : "md", //sm | md | lg | xl
scrollable : true, //true | false
position : "center", //center | top
},
header : {
title : "Modal title",
closeButton : true, //true | false
},
main : {
content : "Modal content <form action="index.html" method="GET"><input type="text" id="formData" name="formData" class="form-control" /></form>",
},
footer : {
buttons : {
close : {
text : "Close",
type : "secondary", //primary | secondary | success | danger | warning | info | light | dark | link
function : "close", //close | submit | reload | redirect | function
},
form : {
text : "Submit",
type : "success", //primary | secondary | success | danger | warning | info | light | dark | link
function : "submit", //close | submit | reload | redirect | function
dataset : function() {
if (document.querySelector("selector #formData").value != "enplated") {
alert("Error, wrong value (correct value is enplated)");
return false;
}
}
},
reload : {
text : "Reload",
type : "warning", //primary | secondary | success | danger | warning | info | light | dark | link
function : "reload", //close | submit | reload | redirect | function
},
redirect : {
text : "Redirect",
type : "danger", //primary | secondary | success | danger | warning | info | light | dark | link
function : "redirect", //close | submit | reload | redirect | function
dataset : "https://example.com",
},
function : {
text : "Function",
type : "primary", //primary | secondary | success | danger | warning | info | light | dark | link
function : "function", //close | submit | reload | redirect | function
dataset : function() {
alert("Hey, you clicked on the function button!");
closeModal("selector");
},
},
},
},
}
After creating the modal data variable (as shown above), you can call the genModal() function and insert the modal data variable as a parameter.
let id = genModal(bootstrapTestModal);This function then returns the ID of the created modal. You can then close the modal windows using the closeModal() function. You can also use 'selector' in the dataset function to close the current modal windows (explained below in the dataset variable description).
closeModal(id);We will now focus on the global section of the code and use simple examples to show the differences in how the modal behave.
var bootstrapTestModal = {
global : {
closable : ..., //true | false
size : "...", //sm | md | lg | xl
scrollable : ..., //true | false
position : "...", //center | top
},
...
}
Allowed values: true / false.
Allowed values: sm / md / lg / xl.
Allowed values: true / false.
Allowed values: center / top.
The header setting controls the upper part of the modal window.
var bootstrapTestModal = {
...
header : {
title : "...", //Modal Title
closeButton : ..., //true | false
},
...
}
Allowed values: (String).
Allowed values: true / false.
This section allows you to set the main content of the modal window itself.
var bootstrapTestModal = {
...
main : {
content : "Hello!
",
},
...
}
Allowed values: (String).
You can insert any HTML code here, which will then be displayed in the main area.
You can also insert, for example, an HTML form, which can then be easily submitted (as we will show below).
var bootstrapTestModal = {
...
main : {
content : "Insert your name: <form action='index.html' method='POST'><input type='text' id='formData' name='formData' class='form-control' /></form>",
},
...
}
The footer allows you to set up several buttons that can then be used for various actions - such as submitting the form, redirecting or closing the form.
var bootstrapTestModal = {
...
footer : {
buttons : {
...
}
}
}
Each button can have a total of 4 properties. First we create any object in the buttons object (it doesn't matter what it is called, but it can help us to navigate in the code).
var bootstrapTestModal = {
...
footer : {
buttons : {
myAmazingButton : {
...
}
}
}
}
Then we create the button properties.
var bootstrapTestModal = {
...
footer : {
buttons : {
myAmazingButton : {
text : "...", //text of the button
type : "...", //primary | secondary | success | danger | warning | info | light | dark | link
function : "...", //close | reload | submit | redirect | function
dataset : function() { //only for submit, redirect and function
...
}
}
}
}
}
Allowed values: (String).
Allowed values: primary / secondary / success / danger / warning / info / light / dark / link.
This setting corresponds to Bootstrap buttons.
Allowed values: close / reload / submit / redirect / function.
This setting determines how the button behaves.
The close value closes the modal window after you click on the button.
The submit value, when clicked, submits the form you created in the body of the modal window. Supports setting the dataset property for form validation (shown below).
The reload value will reload the page when the button is clicked.
The redirect value redirects the user to the desired URL when the button is clicked. You must set the dataset property (shown below).
The function value executes the required JavaScript code when the button is clicked. The dataset property must be set (shown below).
Allowed values: (String) for redirect / (function) for submit and function.
The dataset attribute sets the extended behavior of the button after clicking.
The dataset attribute is used to set the destination URL where the user should be redirected.
var bootstrapTestModal = {
...
footer : {
buttons : {
form : {
text : "Redirect",
type : "primary",
function : "redirect",
dataset : "https://youtu.be/dQw4w9WgXcQ"
}
}
}
}
You can specify a function in the dataset value that is executed when the button is clicked. If you want to stop the form from being submitted, you can do so with the return false; command. Of course, it is then advisable to react to the action appropriately (use an alert or Flash message).
The use of the dataset attribute is not required for the submit property, only optional.
Note that the word selector is used in the querySelector and not the ID of the modal window being created. Since we can't know what ID the modal window will be assigned during button creation, we can use the selector placeholder, which will automatically add the ID during the window generation process. The selector placeholder can also be used, for example, in the closeModal() function.
var bootstrapTestModal = {
...
footer : {
buttons : {
form : {
text : "Submit",
type : "success",
function : "submit",
dataset : function() {
if (document.querySelector("selector #formData").value != "enplated") {
alert("Error, wrong value (correct value is 'enplated')");
return false;
}
}
},
}
}
}
You place any function to be executed when the button is clicked into the dataset.
If you want to close the modal with the function closeModal(), you can use the closeModal('selector') and you do not need to specify the ID of the modal window and it will automatically close the modal window.
var bootstrapTestModal = {
...
footer : {
buttons : {
function : {
text : "Function",
type : "primary",
function : "function",
dataset : function() {
alert("Hey, you clicked on the function button!");
}
},
}
}
}
Of course, you can specify more buttons for the modal window. The one you specify earlier will be more to the left.
var bootstrapTestModal = {
...
footer : {
buttons : {
close : {
text : "Close",
type : "secondary",
function : "close",
},
reload : {
text : "Reload",
type : "danger",
function : "reload",
},
function : {
text : "Function",
type : "primary",
function : "function",
dataset : function() {
alert("Hey, you clicked on the function button!");
}
},
}
}
}
In Enplated, two types of loading icons (named sk and vl) are available by default.
You don't need to import the loading icons in any complicated way, simply insert them via a custom HTML tag.
<sk-plane color="#485ffb"></sk-plane>
<sk-chase color="#485ffb"></sk-chase>
<sk-bounce color="#485ffb"></sk-bounce>
<sk-wave color="#485ffb"></sk-wave>
<sk-pulse color="#485ffb"></sk-pulse>
<sk-flow color="#485ffb"></sk-flow>
<sk-swing color="#485ffb"></sk-swing>
<sk-circle color="#485ffb"></sk-circle>
<sk-circlefade color="#485ffb"></sk-circlefade>
<sk-grid color="#485ffb"></sk-grid>
<sk-fold color="#485ffb"></sk-fold>
<sk-wander color="#485ffb"></sk-wander><vl-simplewheel color="#485ffb" color2="black"></vl-simplewheel>
<vl-onewheel color="#485ffb"></vl-onewheel>
<vl-doublewheel color="#485ffb" color2="black"></vl-doublewheel>
<vl-dotwheel color="#485ffb" color2="black"></vl-dotwheel>
<vl-mutliwheel color="#485ffb" color2="black"></vl-mutliwheel>
<vl-lightwheel color="#485ffb" color2="black" color3="white"></vl-lightwheel>
<vl-line color="#485ffb"></vl-line>>The Enplated Framework offers an integrated option for creating a GDPR consent window and related functionality.
For the development of the GDPR features, we decided to use a more invasive method for the user, and that is that the user is always forced to select the GDPR settings before entering the site (i.e. like Google does, for example).
The user can then choose between 3 settings - either click accept, or reject all non-functional cookies, or choose exactly what they want to allow and what they don't.
It's important to consider a few things. The Enplated Framework will not write any GDPR document for you, and according to the license, the author is not legally responsible for this module. If you are unsure whether you are proceeding correctly with GDPR, always consult with a lawyer or other knowledgeable person.
The full code of the GDPR module can be found below, in the next steps we will explain each line step by step.
var enplatedSettingsCustom = {
...
gdprAllowed : true,
gdprSettings : {
disableOnDomains : ["localhost", "127.0.0.1"],
disableOnPath : ["gdpr.html"],
defaultLanguage : "en",
reloadAfterComplete : false,
googleAnalytics : {
enable : true,
trackingId : "G-1234567890",
anonymizeIp : true,
cookieName : "enpGdprGoogleAnalytics",
},
gdprSetters : {
currentVersion : "1",
mainCookieName : "enpGdpr",
domain : "example.com",
path : "/",
expireInDays : 365,
individualCookies : {
googleFonts : {
default : true,
canBeChanged : false,
onAccept : true,
onDecline: true,
cookieName : "enpGdprGoogleFonts",
},
recaptcha : {
default: true,
canBeChanged : true,
onAccept : true,
onDecline : true,
cookieName : "enpGdprRecaptcha",
},
googleAnalytics : {
default : false,
canBeChanged : true,
onAccept : true,
onDecline: false,
cookieName : "enpGdprGoogleAnalytics",
},
}
},
allowedLang : {
en : {
flag : "https://flags.fmcdn.net/data/flags/small/gb.png",
codename: "English",
texts : {
title : "GDPR and cookies",
buttons : {
acceptButton : "Accept all Cookies",
customizeButton : "Customize your settings",
declineButton : "Continue with only necessary cookies",
goBack : "Go back",
continueWithSelected : "Continue with selected settings"
},
mainScreen : {
info : "This website may use cookies. It may also collect certain personal information. All information can be found on this page example.com/gdpr."
},
gdprTitles : {
cookieListTitle : "Cookie list",
cookieValue : "Value",
consentVersion : "Consent version",
acceptedOn : "Accepted on",
resetConset : "Reset consent",
},
cookies : {
googleFonts : {
name : "Google Fonts",
type : "Critical functional",
description : "Font styles that are used on the services. This setting cannot be changed."
},
recaptcha : {
name : "Google reCaptcha",
type : "Functional",
description : "Google reCAPTCHA is used to protect services against various bots and spambots."
},
googleAnalytics : {
name : "Google Analytics",
type : "Analytics",
description : "Google Analytics is used to generate various statistics about user behaviour, etc."
},
}
}
},
cs : {
flag : "https://flags.fmcdn.net/data/flags/small/cz.png",
codename: "Čeština",
texts : {
title : "GDPR a soubory cookies",
buttons : {
acceptButton : "Přijmout",
customizeButton : "Přizpůsobit nastavení",
declineButton : "Pokračovat pouze s nezbytnými cookies",
goBack : "Jít zpět",
continueWithSelected : "Pokračovat se zvoleným nastavením"
},
mainScreen : {
info : "Tato stránka může používat cookies. Může také sbírat některé osobní informace. Bližší informace můžete nalézt na example.com/gdpr."
},
gdprTitles : {
cookieListTitle : "Seznam cookies",
cookieValue : "Hodnota",
consentVersion : "Verze souhlasu",
acceptedOn : "Přijato",
resetConset : "Resetovat souhlas",
},
cookies : {
googleFonts : {
name : "Google Fonts",
type : "Krytický funkční",
description : "Styly písma, které jsou použity ve službách. Toto nastavení nemůže být změněno."
},
recaptcha : {
name : "Google reCaptcha",
type : "Funkční",
description : "Google reCAPTCHA je používána na ochranu před různými spamboty a jinými roboty."
},
googleAnalytics : {
name : "Google Analytics",
type : "Analytické",
description : "Google Analytics je používáno pro generování různých informacích o chování uživatele apod."
},
}
}
},
es : {
flag : "https://flags.fmcdn.net/data/flags/small/es.png",
codename: "Español",
texts : {
title : "RGPD y cookies",
buttons : {
acceptButton : "Aceptar",
customizeButton : "Personalizar ajustes",
declineButton : "Continuar solo con cookies esenciales",
goBack : "Volver",
continueWithSelected : "Continuar con la configuración seleccionada"
},
mainScreen : {
info : "Esta página puede utilizar cookies. También puede recopilar cierta información personal. Puede encontrar más información en example.com/gdpr."
},
gdprTitles : {
cookieListTitle : "Lista de cookies",
cookieValue : "Valor",
consentVersion : "Versión de consentimiento",
acceptedOn : "Aceptado en",
resetConset : "Restablecer consentimiento",
},
cookies : {
googleFonts : {
name : "Google Fonts",
type : "Funcional esencial",
description : "Estilos de fuente utilizados en servicios. Esta configuración no puede ser modificada."
},
recaptcha : {
name : "Google reCaptcha",
type : "Funcional",
description : "Google reCAPTCHA se utiliza para protegerse contra varios spambots y otros robots."
},
googleAnalytics : {
name : "Google Analytics",
type : "Analítico",
description : "Google Analytics se utiliza para generar información sobre el comportamiento del usuario, entre otras cosas."
},
}
}
},
},
}
};
First, let's focus on the first few lines of the GDPR setup.
var enplatedSettingsCustom = {
...
gdprAllowed : true,
gdprSettings : {
disableOnDomains : ["localhost", "127.0.0.1"],
disableOnPath : ["gdpr.html"],
defaultLanguage : "en",
reloadAfterComplete : false,
...
}
}
The gdprAllowed variable sets whether the GDPR module itself should be run at all. Allowed values are true or false. If set to false, any additional GDPR module code is ignored and skipped.
The disableOnDomains variable is used to set which domains the module should not be run on. Usually on local domains (localhost, 127.0.0.1, etc.) cookies are not stored properly and therefore the module is not functional on these domains and it is therefore advisable to disable it on these domains.
The disableOnPath variable is used to set on which paths the GDPR module is not allowed to run. For example, the logical use is on the GDPR page (the user wants to read the terms before agreeing to them), but it can also be used on various special paths. The window.location.pathname function is used to validate the path.
The defaultLanguage variable sets the default language of the GDPR module. It is explained in detail in section 6.4 Languages and labels.
The reloadAfterComplete variable is used when you need to reflect changes for example on the backend after user confirmation. Possible values are true or false. When set to true, the page is automatically reloaded after confirmation. If set to false, the window will just close without a refresh.
Enplated GDPR module by default allows you to run Google Analytics measurement code. This code is executed with user consent (with denied consent the code is not executed).
var enplatedSettingsCustom = {
...
gdprSettings : {
...
googleAnalytics : {
enable : true,
trackingId : "G-1234567890",
anonymizeIp : true,
cookieName : "enpGdprGoogleAnalytics",
},
...
}
...
}
The enable variable sets whether to run Google Analytics. If you do not plan to integrate Google Analytics at all, set the value to false. Acceptable values are true and false.
In the variable trackingId, enter your tracking code generated in Google Analytics.
You can set the anonymizeIp variable to anonymize the user's IP address. You can learn more here. The allowed values are true and false.
The cookieName variable is used to allow the module to determine whether or not it can execute the measurement code based on the value of this cookie variable. It is therefore important to set the same name as the cookie in the individual cookie settings, as described in the next section 6.3 Cookie settings.
We will now focus on the overall cookie settings. First, we'll start by setting the main cookie, which is used to store information about whether the user has confirmed the cookie settings.
var enplatedSettingsCustom = {
...
gdprSettings : {
...
gdprSetters : {
currentVersion : "1",
mainCookieName : "enpGdpr",
domain : "example.com",
path : "/",
expireInDays : 365,
individualCookies : {
...
}
},
...
}
...
}
The currentVersion variable is used to set which version of the cookie settings you are using. If you change the version, users will be prompted to confirm their settings again (the window will reappear). This is especially useful if you add a new cookie and want users to confirm the new cookie.
The mainCookieName variable is used to set up the saving of confirmation version information. It doesn't matter what name you set, but you should follow the recommendations for general clarity etc.
The domain variable sets the domain to which the cookie setting will be bound.
For example, if you have a site like example.com and another site like demo.example.com and you set both sites' configs directly to their domain, the consent will not be shared.
However, if you also set the main domain to example.com in the config of the demo.example.com site, the consent will be shared. This will ensure that no matter what order the user enters the sites in, only one consent will be displayed and the other site will no longer require consent. For example, we use this method directly at Karlosoft, so no matter which site you enter, you will only see consent once.
The path variable sets the path to store cookies. If you don't need to make special settings, leave it set to /.
The expireInDays variable sets the number of days after which the consent expires and it will be necessary to reconfirm the consent (unless the currentVersion is changed).
Individual cookies are used to set individual policies that you need to set in your application.
var enplatedSettingsCustom = {
...
gdprSettings : {
...
gdprSetters : {
...
individualCookies : {
googleFonts : {
default : true,
canBeChanged : false,
onAccept : true,
onDecline: true,
cookieName : "enpGdprGoogleFonts",
},
recaptcha : {
default: true,
canBeChanged : true,
onAccept : true,
onDecline : false,
cookieName : "enpGdprRecaptcha",
}
googleAnalytics : {
default : false,
canBeChanged : true,
onAccept : true,
onDecline: false,
cookieName : "enpGdprGoogleAnalytics",
},
}
},
...
}
...
}
You can set as many individual cookies as you like. Each variable has several properties:
The default variable indicates the state of the setting in the customization panel. The allowed values are true and false. True makes the setting on, false makes it off.
The canBeChanged variable sets whether the setting can be changed. If false, then the change is blocked by the user (useful for critically functional cookies, etc.). Allowable values are true and false.
The onAccept variable sets what value will be set on the confirmation of all cookies. Allowable values are true and false.
The onDecline variable sets what value will be set on rejection. Allowable values are true and false.
The cookieName variable sets the name under which the cookie will be available.
The cookie will then be available under the given name set in the cookieName variable with the given value (true / false).
Enplated already includes full support for a multi-language GDPR interface by default. The individual languages then consist of two parts - interface descriptions and descriptions of the individual cookies set.
var enplatedSettingsCustom = {
...
gdprSettings : {
...
allowedLang : {
en : {
flag : "https://flags.fmcdn.net/data/flags/small/gb.png",
codename: "English",
texts : {
title : "GDPR and cookies",
buttons : {
acceptButton : "Accept all Cookies",
customizeButton : "Customize your settings",
declineButton : "Continue with only necessary cookies",
goBack : "Go back",
continueWithSelected : "Continue with selected settings"
},
mainScreen : {
info : "This website may use cookies. It may also collect certain personal information. All information can be found on this page example.com/gdpr."
},
gdprTitles : {
cookieListTitle : "Cookie list",
cookieValue : "Value",
consentVersion : "Consent version",
acceptedOn : "Accepted on",
resetConset : "Reset consent",
},
cookies : {
googleFonts : {
name : "Google Fonts",
type : "Critical functional",
description : "Font styles that are used on the services. This setting cannot be changed."
},
recaptcha : {
name : "Google reCaptcha",
type : "Functional",
description : "Google reCAPTCHA is used to protect services against various bots and spambots."
},
googleAnalytics : {
name : "Google Analytics",
type : "Analytics",
description : "Google Analytics is used to generate various statistics about user behaviour, etc."
},
}
}
},
cs : {
...
},
es : {
...
}
}
}
}As shown in the code above, if you want to create a new language, just add a new variable (please use the official language tag) and use the exact same names. The flag variable refers to the flag image of the language (used in the language switcher). The cookie variable must then correspond to the cookies list.
The full sample translation can be found here (English and Czech were created manually, Spanish was created by machine translation).
The language used for the module listing is then determined as follows:
1. If an enpPageLang variable is inserted in the page with a given language (for example, en / cs / es), this language is always used.
<script>
var enpPageLang = "en";
</script>2. The language used is the language used by the user (depending on the browser or operating system).
3. If there is no translation for the language (for example, the user's language is Japanese and you only have English and Spanish translations), then the default language set in the defaultLanguage variable is used (this is at the beginning of the GDPR configuration, see 6.1 Basic settings).
A simple table with an overview of the consents with the possibility to revoke the consent can be created using this HTML tag. The lang attribute must then be inserted with the language tag to be used for the listing for example, en / cs / es).
<enp-gdpr lang="en"></enp-gdpr>