General JS-Problems with templates and jQuery » History » Revision 10
Revision 9 (Patrick Kohl, 04/27/2012 10:23 PM) → Revision 10/17 (Jörg Kiekebusch, 04/27/2012 11:04 PM)
h1. 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. h2. javascript/Css Template template Overiding & Avoiding Anti libraries Conflicts between Libraries h3. using vmJsApi::js() *A simple example *simple sample :* @vmJsApi::js('jquery-ui');@ By on calling the function this way, we verify if the function already exists exist in the template (in templates/MY_TEMPLATE/js folder) before using the Virtuemart internal (components/virtuemart/assets/js folder). The benefit benefict is that you can place your own javascript in the (My_TEMPLATE) js folder your own javascript and overide the virtuemart script. A static array prevents prevent duplicate loading load of all javascripts javascript loaded this way by using the first parameter(here param(here 'jquery-ui') _In this example we load 'JOOMLAROOT/components/virtuemart/assets/js/jquery-ui.js' if this doesn't already not exist in the template/js folder. template *Full Example *full sample :* @vmJsApi::js('jquery-ui','//ajax.googleapis.com/ajax/libs/jqueryui','1.8.16',true);@ Here with all parameters the complete complet name and path are splitted. In this case we We load the library externally. Therefore librarie external this is why we have '//ajax.googleapis.com/ajax/libs/jqueryui' as 2nd parameter. parameter _Setting a path does de not permit to auto-overide this file with auto overide by template the template version_ file_ As mentioned before, said before the first parameter is the name used to compare the loaded files and must be always be the exactly the same. Do same and not change it for the override library same librarie or you loose the benefit benefict of being able to compare them. the compare. 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'). The last parameter used *true* here is *true* and must be set if you want use the minified version (this add .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 permit to auto load http or https revision from Google here in case of SSL) h3. using vmJsApi::css() The logic is same but the path change @vmJsApi::css('facebox');@ 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).