General JS-Problems with templates and jQuery¶

jQuery is often used by templaters and other extensions. jQuery must not be loaded more than one time. To prevent incompatibilities, you can easily switch off the loading of the virtuemart jQuery library. (Only turn off Virtuemart Jquery IF your template, or other modules are loading Jquery). This can be checked by viewing the page source.

To Disable Virtuemart jQuery
Look for this at /administrator/index.php?option=com_virtuemart&view=config tab templates.

The options for you important are:
Using the Virtuemart jQuery
Using the product Scripts (Product Scripts have to be enabled for cart functions to work)
Using the Script ajax Countries / Regions

Most jquery conflicts are fixed, when you disable the "Virtuemart jQuery" library.

Backend Menu Jquery Conflict
Slightly different, but similar is the problem, when the backend jQuery is broken. You can recognize it when the menu on the left side is completely expanded and when the store/apply has no effect. This happens, when you do not have access to the jQuery of google. So you need to prevent using the jQuery of google. But you can't store the configuration. So you must

edit the virtuemart.cfg file in /administrator/components/com_virtuemart
and change google_jquery=1 to google_jquery=0

Then go in your database and empty the table _virtuemart_adminmenuentries. Just use refresh your backend and the problem should be solved.

javascript/CSS Template Overrides & Avoiding Conflicts between Libraries¶

Using vmJsApi::js()¶

A Simple Example:

vmJsApi::js('jquery-ui');

By calling the function this way, we are able to check if the function already exists in the template (in templates/MY_TEMPLATE/js folder) before using the Virtuemart internal (components/virtuemart/assets/js folder).
The benefit is that you can place your own javascript in the (My_TEMPLATE) js folder and overide the orginal virtuemart script.
A static array prevents duplicate loading of all javascripts called in this way, by using the first parameter(here 'jquery-ui')

In this example we load 'JOOMLAROOT/components/virtuemart/assets/js/jquery-ui.js' if this doesn't already exist in the template/js folder.

A Full Example:

vmJsApi::js('jquery-ui','//ajax.googleapis.com/ajax/libs/jqueryui','1.8.16',true);

Here, using all parameters, the complete name and path are splitted.
In this case we load the library externally. Therefore we have '//ajax.googleapis.com/ajax/libs/jqueryui' as 2nd parameter.
Setting a path does not permit to auto-overide this file with the template version

As mentioned before, the first parameter is the name used to compare the loaded files and must always be the exactly the same. Do not change it for the override library or you loose the benefit of being able to compare them.

Then using vmJsApi::js('jquery-ui.1.8.6') and vmJsApi::js('jquery-ui') has not the same Main name and simply does not prevent the reloading. Therefore you must always use same name for same library and change the parameter number 3 (in this case '1.8.16').

The last parameter used here is true and must be set if you want to use the minified version (this adds .min in the file name to load).

In this example we load '//ajax.googleapis.com/ajax/libs/jqueryui/jquery-ui.1.8.16.min.js' (http// is not needed for external load and permits to auto-load http or https revision from Google here in case of SSL)

Using vmJsApi::css()¶

The logic is the same but the path changes:

vmJsApi::css('facebox');

This loads the facebox.css, testing if the file exists in the template (in templates/MY_TEMPLATE/css folder) or if negative, loads it from the virtuemart css (components/virtuemart/assets/css folder).