After the successful implementation of Enplated Framework on your site, you first need to set up the config file correctly.
At 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 turn dark mode on or off for the website. The following theme is used for dark mode.
You can enable the import of 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 the import of the AOS library.
You then don't have to deal with importing the AOS files or initializing the library - just add the corresponding attributes to the animated element.
Smart variables let you add useful features to 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>
When the page is rendered, the variable values are 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 them in one place, data setters 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. If a change is needed, updating all the attributes will be time-consuming.
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 provide a valid selector for 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.
Want to try 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. You can also 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 quite a complex process, the full code for an entire modal window is shown below. The individual lines, what they do and what can be set are then 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 window using the closeModal() function. You can also use 'selector' in the dataset function to close the current modal window (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 behaves.
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 : "<p>Hello!</p>",
},
...
}
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 modal.
var bootstrapTestModal = {
...
footer : {
buttons : {
...
}
}
}
Each button can have a total of 4 properties. First we create any object in the buttons object (the name doesn't matter, but a descriptive one makes the code easier to navigate).
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. It 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. In that case, it is advisable to inform the user (with an alert or Flash message).
The dataset attribute is optional for the submit value.
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;
}
}
},
}
}
}
Put the function to be executed when the button is clicked into the dataset.
If you want to close the modal with the closeModal() function, you can use closeModal('selector'). You do not need to specify the ID of the modal window.
var bootstrapTestModal = {
...
footer : {
buttons : {
function : {
text : "Function",
type : "primary",
function : "function",
dataset : function() {
alert("Hey, you clicked on the function button!");
}
},
}
}
}
You can also specify more buttons for the modal window. Buttons specified earlier appear further 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 GDPR features, we chose a more invasive approach: the user must always choose their GDPR settings before entering the site (similar to Google).
The user can then choose between 3 options: accept everything, reject all non-functional cookies, or choose exactly what to allow.
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 comply with GDPR, always consult a lawyer or another qualified person.
The full code of the GDPR module can be found below. In the following sections, we explain it line by line.
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 behavior, 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í 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 sets the domains on which the module should not run. On local domains (localhost, 127.0.0.1, etc.), cookies are usually not stored properly, so the module does not work there and it is advisable to disable it.
The disableOnPath variable is used to set on which paths the GDPR module is not allowed to run. A typical use is the GDPR page (the user wants to read the terms before agreeing to them), but it can be used on any special path. The window.location.pathname property is used to check 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. Allowed 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.
By default, the Enplated GDPR module allows you to run the Google Analytics measurement code. The code runs only with the user's consent.
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. Allowed values are true and false.
In the trackingId variable, 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. Allowed values are true and false.
The cookieName variable tells the module which cookie decides whether the measurement code can run. It is therefore important to use the same name as 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 sets the name of the cookie that stores the confirmed version. The name is up to you, but it should be clear and descriptive.
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 each site's config to its own domain, the consent will not be shared.
However, if you also set the domain to example.com in the config of the demo.example.com site, the consent will be shared. This ensures that, whichever site the user visits first, consent is requested only once. We use this method at Karlosoft, so no matter which site you visit, you only see the consent once.
The path variable sets the cookie path. 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 define the separate policies your application needs.
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. Allowed values are true and false. True turns the setting on, false turns it off.
The canBeChanged variable sets whether the setting can be changed. If false, the user cannot change it (useful for critical functional cookies, etc.). Allowed values are true and false.
The onAccept variable sets the value used when the user accepts all cookies. Allowed values are true and false.
The onDecline variable sets the value used when the user rejects them. Allowed 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 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 behavior, 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 of the module 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. Otherwise, the user's language is used (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 (it 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>