JavascriptCSS Template Overrides and Avoiding Conflicts between Libraries » History » Version 2
Jörg Kiekebusch, 08/26/2012 03:14 PM
1 | 2 | Jörg Kiekebusch | h1. Javascript/CSS Template Overrides and Avoiding Conflicts between Libraries |
---|---|---|---|
2 | 1 | Jörg Kiekebusch | |
3 | 1 | Jörg Kiekebusch | h3. Using vmJsApi::js() |
4 | 1 | Jörg Kiekebusch | |
5 | 1 | Jörg Kiekebusch | *A Simple Example:* |
6 | 1 | Jörg Kiekebusch | <pre><code class="ruby">vmJsApi::js('jquery-ui');</code></pre> |
7 | 1 | Jörg Kiekebusch | 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. |
8 | 1 | Jörg Kiekebusch | The benefit is that you can place your own javascript in the (My_TEMPLATE) js folder and overide the orginal virtuemart script. |
9 | 1 | Jörg Kiekebusch | A static array prevents duplicate loading of all javascripts called in this way, by using the first parameter(here 'jquery-ui') |
10 | 1 | Jörg Kiekebusch | |
11 | 1 | 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._ |
12 | 1 | Jörg Kiekebusch | |
13 | 1 | Jörg Kiekebusch | *A Full Example:* |
14 | 1 | Jörg Kiekebusch | <pre><code class="ruby">vmJsApi::js('jquery-ui','//ajax.googleapis.com/ajax/libs/jqueryui','1.8.16',true);</code></pre> |
15 | 1 | Jörg Kiekebusch | |
16 | 1 | Jörg Kiekebusch | Here, using all parameters, the complete name and path are splitted. |
17 | 1 | Jörg Kiekebusch | In this case we load the library externally. Therefore we have '//ajax.googleapis.com/ajax/libs/jqueryui' as 2nd parameter. |
18 | 1 | Jörg Kiekebusch | _Setting a path does not permit to auto-overide this file with the template version_ |
19 | 1 | Jörg Kiekebusch | |
20 | 1 | 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. |
21 | 1 | Jörg Kiekebusch | |
22 | 1 | 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 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'). |
23 | 1 | Jörg Kiekebusch | |
24 | 1 | Jörg Kiekebusch | 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). |
25 | 1 | Jörg Kiekebusch | |
26 | 1 | Jörg Kiekebusch | _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)_ |
27 | 1 | Jörg Kiekebusch | |
28 | 1 | Jörg Kiekebusch | |
29 | 1 | Jörg Kiekebusch | h3. Using vmJsApi::css() |
30 | 1 | Jörg Kiekebusch | |
31 | 1 | Jörg Kiekebusch | The logic is the same but the path changes: |
32 | 1 | Jörg Kiekebusch | <pre><code class="ruby">vmJsApi::css('facebox');</code></pre> |
33 | 1 | Jörg Kiekebusch | 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). |