There are several ways to include your custom Javascript code in to Joomla. In this tutorial we will explain how to use them and which one is better depending on the code that you like to include.

Trough template manager

YJSG template administration comes with Custom code tab that you can use to add your custom javascript snippets to template head or footer.

Using JDocument

In joomla you can use JDocument class to add custom Javascript files or block of Javascript code in head section of your template.
This first example shows how to add custom Javascript file in YJSG based template.
For your convenience you can use file name yjsg_custom_params.php to add any custom files or code blocks.
This file is located in site_root/template/yjsg_template_name/custom/ folder.

Adding custom Javascript file via JDocument/addScript

First move your Javascript file to site_root/template/yjsg_template_name/src/ folder , open yjsg_custom_params.php and add this line.

example:

$document->addScript($yj_site.'src/my_new_js_file.js');

Adding custom file via $YjsgCustomJS array

This option is specific to YJSG based templates only and is used to load your Javascript file after all template scripts and Joomla Javascript library files have loaded.
To use $YjsgCustomJS first move your Javascript file to site_root/template/yjsg_template_name/src/ folder , open yjsg_custom_params.php and add this line.

example:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';

To add multiple files add this line in yjsg_custom_params.php

example:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file2.js';

Adding block of Javascript in head with JDocument/addScriptDeclaration

To add block of Javascript code, open yjsg_custom_params.php and add this line

example:

$document->addScriptDeclaration("
var myVar = 'myValue';
");

Adding block of Javascript in head with $yjsg_js variable

One advantage of $yjsg_js variable use is that is loading your Javascript block code at the bottom of your page instead of the head. This way the code blocs are not clogging up your page load plus is much better for your website SEO. For better performance and cleaner head tags $yjsg_js is echoed at the end of the page in layouts/yjsg_footer.php. Usage is very simple and it is similar to JDocument/addScriptDeclaration.
Just add following line to yjsg_custom_params.php file.

example:

$yjsg_js.="var myVar ='my_js_var;'";

Warning: don't forget the dot before the = operator.