Why we have our own JavaScript Handler in VirtueMart
VirtueMart 3 supports reloading of the productdetails by an ajax call. This implies that we have to trigger existing JS and that we have maybe to add new JS, which must be also triggered like if the page just got ready. The joomla method to add JavaScript is in this case not sufficient. The scripts are added to the header of the ajax call and just trashed. We must separate our javascript into two groups. One group is the javascript the page needs to load and the the second group is the javascript that is doing stuff after the page loads (like looking for click events or something).
What is it doing?
Similar to joomla the js is added to a queque. But a name must be given (or is generated), so it can be manipulated by a templater as long it is not rendered. Calling the function again with the same name, just replaces the existing script. This prevents automatically loading the js twice as long the same name is used. It gives also templaters an easy method to override the core JS by their own versions. The JS Writer is called after the function display (only in vmViews). The JS Writer adds the files then in joomla style to the header and the inline js to the end of the component container. The entry is set to written. So you can also call the Writer as often as you want. This is very handy for modules, or plugins. The code is additionally wrapped by //<![CDATA[ in case it is missing.
How to use
As templater or module developer the useage is quite simple, just use the function vmJsApi::addJScript.
public static function addJScript($name, $script = false, $defer = true, $async = false)
The first parameter is the name to label the script. The second parameter is just your java script string. The last parameters have as default already the correct values for inline js. For libraries like jQuery, you need usually defer = false.
In case you are just loading a file, it is important to use a trailing slash /, use for absolute URLs or domains just // instead of https. It is also a valid shortcut to use as first parameter directly the relative URL to your file. Local files search for the js in /templates/yourtemplate/js, then in general Virtuemart assets path (usually components/com_virtuemart/assets/js).
Examples:
//Simple call
vmJsApi::addJScript('facebox');
//Adds a string as script to the end of your document
vmJsApi::addJScript ( 'vm.cookie', 'var virtuemartcookie="'.$cookieName.'";');
//Adds a file to the header, relative to your joomla URL vmJsApi::addJScript('/administrator/components/com_virtuemart/assets/js/jquery.coookie.js');
//Adds a file to the header, relative to your js directory
vmJsApi::addJScript('fancybox/jquery.fancybox-1.3.4.pack');
//Loads js from google libraries vmJsApi::addJScript('jquery.min','//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',false);
In case you are writing a module, write the JS after rendering our plugin with writeJs, example:
require(JModuleHelper::getLayoutPath('mod_virtuemart_cart'));
echo vmJsApi::writeJS();
In case you want to see the already loaded JS (for example because you want to change it), use
$js = vmJsApi::getJScripts();