General JS-Problems with templates and jQuery » History » Version 12

Jörg Kiekebusch, 04/28/2012 10:02 AM

1 1 Max Milbers
h1. General JS-Problems with templates and jQuery
2 1 Max Milbers
3 7 Alex Steiner
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.
4 1 Max Milbers
5 12 Jörg Kiekebusch
*To Disable Virtuemart jQuery*
6 1 Max Milbers
Look for this at /administrator/index.php?option=com_virtuemart&view=config tab templates. 
7 1 Max Milbers
8 2 Max Milbers
The options for you important are:
9 1 Max Milbers
Using the Virtuemart jQuery 	
10 6 Alex Steiner
Using the product Scripts 	(Product Scripts have to be enabled for cart functions to work)
11 1 Max Milbers
Using the Script ajax Countries / Regions
12 1 Max Milbers
13 1 Max Milbers
Most jquery conflicts are fixed, when you disable the "Virtuemart jQuery" library. 
14 1 Max Milbers
15 6 Alex Steiner
*Backend Menu Jquery Conflict*
16 5 Alex Steiner
*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 
17 2 Max Milbers
18 2 Max Milbers
edit the virtuemart.cfg file in /administrator/components/com_virtuemart 
19 2 Max Milbers
and change google_jquery=1 to google_jquery=0
20 2 Max Milbers
21 1 Max Milbers
Then go in your database and empty the table _virtuemart_adminmenuentries. Just use refresh your backend and the problem should be solved.
22 12 Jörg Kiekebusch
23 12 Jörg Kiekebusch
24 12 Jörg Kiekebusch
25 12 Jörg Kiekebusch
javascript/CSS Template Overrides & Avoiding Conflicts between Libraries
26 12 Jörg Kiekebusch
27 9 Patrick Kohl
h3. using vmJsApi::js()
28 9 Patrick Kohl
29 12 Jörg Kiekebusch
*A Simple Example:*
30 12 Jörg Kiekebusch
<pre><code class="ruby">vmJsApi::js('jquery-ui');</code></pre>
31 10 Jörg Kiekebusch
By calling the function this way, we verify if the function already exists in the template (in templates/MY_TEMPLATE/js folder) before using the Virtuemart internal (components/virtuemart/assets/js folder).
32 10 Jörg Kiekebusch
The benefit is that you can place your own javascript in the (My_TEMPLATE) js folder and overide the virtuemart script.
33 10 Jörg Kiekebusch
A static array prevents duplicate loading of all javascripts loaded this way by using the first parameter(here 'jquery-ui')
34 9 Patrick Kohl
35 11 Jörg Kiekebusch
_In this example we load 'JOOMLAROOT/components/virtuemart/assets/js/jquery-ui.js' if this doesn't already exist in the template/js folder._
36 10 Jörg Kiekebusch
37 12 Jörg Kiekebusch
*A Full Example:*
38 12 Jörg Kiekebusch
<pre><code class="ruby">vmJsApi::js('jquery-ui','//','1.8.16',true);</code></pre>
39 9 Patrick Kohl
40 10 Jörg Kiekebusch
Here with all parameters the complete name and path are splitted.
41 10 Jörg Kiekebusch
In this case we load the library externally. Therefore we have '//' as 2nd parameter.
42 10 Jörg Kiekebusch
_Setting a path does not permit to auto-overide this file with the template version_
43 9 Patrick Kohl
44 10 Jörg Kiekebusch
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.
45 9 Patrick Kohl
46 12 Jörg Kiekebusch
Then using *vmJsApi::js('jquery-ui.1.8.6')* and *vmJsApi::js('jquery-ui')* has not the same *Main name* and simply do not prevent the reloading. For this you must *always use same name* for *same library* and change the parameter number 3 (in this case '1.8.16').
47 9 Patrick Kohl
48 10 Jörg Kiekebusch
The last parameter used here is *true*  and must be set if you want use the minified version (this add .min in the file name to load).
49 9 Patrick Kohl
50 9 Patrick Kohl
In this example we load '//' (http// is not needed for external load and permit to auto load http or https revision from Google here in case of SSL)
51 9 Patrick Kohl
52 9 Patrick Kohl
53 9 Patrick Kohl
h3. using vmJsApi::css()
54 9 Patrick Kohl
55 9 Patrick Kohl
The logic is same but the path change
56 9 Patrick Kohl
57 9 Patrick Kohl
load the facebox.css testing if the file exist in template (in templates/MY_TEMPLATE/css folder) or load the virtuemart css (components/virtuemart/assets/css folder).