How to use Javascript handler in VirtueMart? 2024

5/5 - (1 vote)

VirtueMart 3 supports reloading of the productdetails by an ajax call. It means we have to trigger existing JS and add new JS, and it must be 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 javascript in to two group: the javascript the page needs to load and the javascript that is doing stuff after the page loads.

The js is added to a queque. But a name must be given, 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. The code is additionally wrapped by //<![CDATA[ in case it is missing.

How to use it?

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, 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);

If you are writing a module, write the JS after rendering our plugin with writeJs, example:

require(JModuleHelper::getLayoutPath('mod_virtuemart_cart'));
echo vmJsApi::writeJS();

If you want to see the already loaded JS, use

$js = vmJsApi::getJScripts();

If you have any question about this post, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks!