Learn more about Sneat's core js and usage of third-party plugins.
Below is the folder structure which contain the JS/ES6 files.
๐ฆ
โโโ ๐ js > Template core JS(ES6) folder
โย ย โโโ ๐ _template-customizer > Contains template customizer markup & styles
โย ย โโโ ๐ bootstrap.js > Extends bootstrap JS from node_modules/
โย ย โโโ ๐ dropdown-hover.js > Add onHover event for bootstrap dropdowns
โย ย โโโ ๐ helpers.js > Contains reusable helper functions
โย ย โโโ ๐ mega-dropdown.js > Mega menu JS
โย ย โโโ ๐ menu.js > Core menu JS (vertical & horizontal)
โย ย โโโ ๐ template-customizer.js > Customizer Plugin JS
โ
โโโ ๐ assets > Templates assets
โย ย โโโ ๐ js > Contains main, config, pages, apps and third-party plugins JS
โย ย โโโ ๐ main.js > Initialize the template core components, plugins and contain common JS.
โย ย โโโ ๐ config.js > Contains JS global variables and TemplateCustomizer settings
โย ย โโโ ...
โ
โโโ ๐ libs > Third-party libraries(plugins)
โย ย โโโ ๐ datatables-bs5 > DataTables plugins JS extends from node_modules
โย ย โย ย โโโ ๐ datatables-bootstrap5.js
โย ย โโโ ...
โ
โโโ ๐ build-config.js > Template build config file
โโโ ๐ gulpfile.js > Gulpfile
โโโ ...
js/
(core JS) folder.assets/js/
folder, make sure you keep an eye on those edited changes as Sneat will be constantly updated and you need to merge those changes manually.js/
Folder contains template core JS (ES6) files. Sneat uses Webpack to transpile those files and generate js in assets/vendor/js/
folder. Read more. It is not recommend to make any changes in this folder.bootstrap.js
File extend core bootstrap js from node_modules
. You can also import required only plugins of bootstrap.helpers.js
File contains reusable helper functions. Read more
menu.js
Core menu JS file, contain vertical & horizontal menu (navigation) code.template-customizer.js
Template Customizer Plugin JS file.
Read more
assets/js
Folder contains template static JavaScript files of each pages, apps and third-party plugins usage. If you modify any JavaScript files from this folder, make sure you keep an eye on those you edited changes as it will be constantly updated and you need to merge those changes manually.main.js
This the main file which initialize the template core components, plugins and contain common JS.config.js
Contains JS global variables and TemplateCustomizer settings which are used in this templates. Read more
libs/
Folder also contains third-party libraries (plugins) JavaScript files which is extended from node_modules/
. You can easily add/remover plugins as per your choice. For more details refer Third Party Plugin Guide.
node_modules
. If you don't want to use all bootstrap plugin, then you can import specific plugin also in bootstrap.js
file as per your preference.
Sneat provide almost all possible options to customize it easily using
config.js
file. Apart from that it also provides useful helper methods to customize it easily.
You can also modify any pages, apps or third-party plugin JavaScript files from
assets/js
folder. Just make sure you keep an eye on those you edited changes as it will be constantly updated and you need to merge those changes manually.
Where should I write my custom JavaScrip?
To avoid file loss, overrides of your custom JavaScript or any other conflicts during the upgrade process, create your custom javascript file assets/js/scripts.js
. Just don't forget to include it in your HTML file.
Helpers
Useful JavaScript helpers methods to customize Sneat easily. For example, To use helpers methods, Open browser developer tool and in console tab run Helpers.isRtl()
Method | Description |
---|---|
isLightStyle()
|
Returns true if the current style is light, else returns false . |
isDarkStyle()
|
Returns true if the current style is dark, else returns false . |
isRtl()
|
Returns true if the current layout is in RTL direction, else returns false . |
isCollapsed()
|
Returns true if the current layout is collapsed, else returns false . |
isFixed()
|
Returns true if the current layout is fixed, else returns false . |
isNavbarFixed()
|
Returns true if the Navbar is fixed, else returns false . |
isFooterFixed()
|
Returns true if the Footer is fixed, else returns false . |
setCollapsed()
|
Set to true to collapsed vertical menu, false to expand it. For example,
setCollapsed(true)
|
toggleCollapsed()
|
Set to true to collapsed vertical menu, false to expand it. |
isSmallScreen()
|
Returns true if the window width is less than 1200px, else returns false . |
isMobileDevice()
|
Returns true if the current devices is mobile, else returns false . |
Customizer
Useful customizer JavaScript helper methods to customize Sneat easily. For example, To use customizer helper methods, Open browser developer tool and in console tab run
templateCustomizer.setRtl(true)
Method | Description |
---|---|
setColor()
|
Set color string to update custom primary color. |
setSkin()
|
Set the current theme. Accepts the following values:
|
setTheme()
|
Set the current theme light/dark/auto. Accepts the following values:
|
setLayoutNavbarOption()
|
Set to navbar static/fixed/hidden:
|
setContentLayout()
|
Set the current layout type compact/wide. Accepts the following values:
|
setHeaderType()
|
Set the current layout type Fixed/Static. Accepts the following values:
|
setLayoutFooterFixed()
|
Set to true to make layout footer fixed, false to make it static. |
setDropdownOnHover()
|
Set to true to open horizontal menu on hover, false to open on click. |
setRtl()
|
Set to true to enable RTL direction (mode), false to disable it. |
setLang()
|
Set current language. The value must be in the TemplateCustomizer.LANGUAGES , otherwise an error will be thrown. Read more |
update()
|
Update customizer settings panel. |
clearLocalStorage()
|
Clear localStorage. |
destroy()
|
Destroy TemplateCustomizer instance. |
Yes. Before you remove it, confirm the following important points.
If you are fine with the above points, then proceed with removing jquery.js
from HTML.
Also, remove jQuery plugin usage from main.js
. Search for the Removed following code if you don't wish to use jQuery and remove the code.
Sneat Use i18next as its internationalization framework. This framework allows you to translate text anywhere in the template. For demonstration purposes, the template includes translation for the navigation menu, but you can extend this functionality across the entire template.
data-language
attribute and specify the text direction (e.g., rtl
for right-to-left)
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
<span>Arabic</span>
</a>
</li>
This template uses the Flag Icons library, allowing you to add any countryโs flag to the dropdown. Simply choose the appropriate flag icon for the language.
The translation files are located in the /assets/json/locales/
folder. Each file contains key-value pairs for words or phrases to translate. You can:
When using translations, include the data-i18n
attribute in the corresponding HTML tag. For example:
<span data-i18n="Apple">Apple</span>
To set the default language, modify the lang
value in the config.js
file. For example, set it to English ('en'
) as shown below:
if (typeof TemplateCustomizer !== 'undefined') {
window.templateCustomizer = new TemplateCustomizer({
displayCustomizer: true,
lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
// defaultPrimaryColor: '#D11BB4',
// defaultSkin: 1,
// defaultTheme: 'system',
// defaultSemiDark: true,
// defaultContentLayout: 'wide',
// defaultHeaderType: 'static',
// defaultMenuCollapsed: true,
// defaultNavbarType: 'static',
// defaultTextDir: 'rtl',
// defaultFooterFixed: false,
// defaultShowDropdownOnHover: false,
controls: [
'color',
'theme',
'skins',
'semiDark',
'layoutCollapsed',
'layoutNavbarOptions',
'headerType',
'contentLayout',
'rtl'
]
});
}
main.js
The internationalization setup is defined in the main.js
file. Below is the initialization code:
if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
i18next
.use(i18NextHttpBackend)
.init({
lng: window.templateCustomizer ? window.templateCustomizer.settings.lang : 'en',
debug: false,
fallbackLng: 'en',
backend: {
loadPath: assetsPath + 'json/locales/.json'
},
returnObjects: true
})
.then(function (t) {
localize();
});
}
lang
: Sets the default language. Here, the lang value is retrieved from config.js
.fallbackLng
: Specifies the fallback language if the selected language file is unavailable.loadPath
: Defines the file path for the language JSON files.template-customizer.js
to Support the New LanguageYou can refer to this link to learn how to work with the file.