General JS-Problems with templates and jQuery » History » Version 9
Patrick Kohl, 04/27/2012 10:23 PM
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 | 8 | Alex Steiner | *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 | 2 | 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 | 9 | Patrick Kohl | |
23 | 9 | Patrick Kohl | h2. javascript/Css template Overiding & Anti libraries Conflicts |
24 | 9 | Patrick Kohl | |
25 | 9 | Patrick Kohl | h3. using vmJsApi::js() |
26 | 9 | Patrick Kohl | |
27 | 9 | Patrick Kohl | *simple sample :* |
28 | 9 | Patrick Kohl | @vmJsApi::js('jquery-ui');@ |
29 | 9 | Patrick Kohl | on calling the function this way, we verify if the function exist in the template (in templates/MY_TEMPLATE/js folder) before using internal (components/virtuemart/assets/js folder). |
30 | 9 | Patrick Kohl | The benefict is that you can place in the js folder your own javascript and overide virtuemart script. |
31 | 9 | Patrick Kohl | A static array prevent duplicate load of all javascript loaded this way using the first param(here 'jquery-ui') |
32 | 9 | Patrick Kohl | |
33 | 9 | Patrick Kohl | _In this example we load 'JOOMLAROOT/components/virtuemart/assets/js/jquery-ui.js' if this not exist in template |
34 | 9 | Patrick Kohl | |
35 | 9 | Patrick Kohl | *full sample :* |
36 | 9 | Patrick Kohl | @vmJsApi::js('jquery-ui','//ajax.googleapis.com/ajax/libs/jqueryui','1.8.16',true);@ |
37 | 9 | Patrick Kohl | |
38 | 9 | Patrick Kohl | Here with all parameters the complet name and path are splitted. |
39 | 9 | Patrick Kohl | We load the librarie external this is why we have '//ajax.googleapis.com/ajax/libs/jqueryui' as 2nd parameter |
40 | 9 | Patrick Kohl | _Setting a path de not permit to auto overide by template the file_ |
41 | 9 | Patrick Kohl | |
42 | 9 | Patrick Kohl | As said before the first parameter is the name used to compare the loaded files and must be always the same and not change for the same librarie or you loose the benefict of the compare. |
43 | 9 | Patrick Kohl | |
44 | 9 | Patrick Kohl | 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'). |
45 | 9 | Patrick Kohl | |
46 | 9 | Patrick Kohl | The last parameter *true* here must be set if you want use the minified version (this add .min in the file name to load). |
47 | 9 | Patrick Kohl | |
48 | 9 | Patrick Kohl | 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 permit to auto load http or https revision from Google here in case of SSL) |
49 | 9 | Patrick Kohl | |
50 | 9 | Patrick Kohl | |
51 | 9 | Patrick Kohl | h3. using vmJsApi::css() |
52 | 9 | Patrick Kohl | |
53 | 9 | Patrick Kohl | The logic is same but the path change |
54 | 9 | Patrick Kohl | @vmJsApi::css('facebox');@ |
55 | 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). |