Standardizing jQuery in Magento Extensions and Themes

I’m not that familiar with Prototype (Magento’s default Javascript library), so I use jQuery with most of the Magento extensions that I create. Although I use $.noConflict to avoid conflicts with Prototype and other jQuery versions, there are times when multiple versions of jQuery are loaded. This generally causes Javascript errors with either my extension or another extension/theme that is loaded on the page (depending upon which is loaded first).

To avoid conflicts for future Magento theme and extension developers, I created the jQuery Update extension. Similar to Drupal’s jQuery Update module, this extension will standardize the use of jQuery and jQuery UI within Magento.

Both jQuery and jQuery UI are stored in the main js (bold) folder (as opposed to the skin folder). This will ensure that jQuery will be loaded before any skin theme or extension Javascript code is loaded. The jQuery file already contains the $.noConflict function, so developers will not have to add it to there code.

Enabling the jQuery Update Magento Extension

Once the extension is enabled, jQuery will be loaded in both the front-end and back-end by default. However, jQuery UI is not loaded by default, it must be enabled in the Configuration section.

jquery_update_configuration

Selecting jQuery UI Themes

Note in the image above, that you are able to select a jQuery UI theme. This theme will be used in both the front-end and back-end (if jQuery UI is enabled for the back-end). jQuery Update packages the standard jQuery UI themes. Only the CSS files for the selected theme will be loaded in the browser.

You are also able to create custom themes. All themes are located under /js/jquery_update/themes/[theme name]. The jQuery UI theme drop-down is dynamically generated – the code iterates over the child [theme-name] folders in the themes directory to create the value and label for the drop-down. So to add a custom jQuery UI theme, when packaging your Magento extension or theme, create a child folder (theme-name) and then add the images folder and jquery-ui.min.css file to the custom folder.

js/jquery_update/themes/[your theme name]/images folder
js/jquery_update/themes/[your theme name]/jquery-ui.min.css

Note: When packaging your extensioin theme, add jQuery Update as a dependent package.

That’s it. Many Magento developers use jQuery. Hopefully, this extension will standardize it’s use. jQuery Update can be downloaded from Magento Connect.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks