Upgrade of template-patches - Yireo

MageBridge hidden features: Disable JavaScript

Wednesday, 29 December 2010

Well, it's not actually a hidden feature, and it's actually used a lot by those building MageBridge shops: Because Magento uses the ProtoType framework and Joomla! uses frequently the MooTools framework, and because the JavaScript-code of MooTools conflicts with ProtoType, resolving the JavaScript conflict is something you have to deal with when setting up a MageBridge shop.

Settings in MageBridge backend

The Joomla! component of MageBridge includes a complete configuration-page with a lot of settings: Most of these settings either deal with the basic functionality of the bridge (the API being setup between Joomla! and Magento) or expert-settings that do not need to be changed. However, the settings under the theming tab are of huge importance:

MageBridge integrates Magento visually in Joomla!, and to get direct result with any Magento theme and any Joomla! theme, the Magento theme is also pushed into the Joomla! HTML-document. Because of this, CSS stylesheets from Magento are combined with CSS stylesheets from Joomla! and this might create conflicts on the CSS-level. The same is true for JavaScript (the conflict between Joomla! and Magento).

mb_js_settings

The theming-tab includes a lot of different settings that allow you to tune how MageBridge should deal with JavaScript. The default settings are good, but sometmes you might want to tune things for performance and/or usability.

Different strategies for resolving the JavaScript conflict

In general, unless you are an expert with MooTools and ProtoType, you need to disable MooTools if you want to load ProtoType. The setting Disable Joomla! MooTools should therefor be set to Yes at all times. Equally, you normally do not want to disable Magento ProtoType. But jQuery is a third framework that can be loaded in the so-called noConflict() mode and can then be used safely together with either MooTools or ProtoType. So if jQuery is loaded in noConflict() mode (because some Joomla! extension has done so), you might want to set Disable Joomla! jQuery to No.

Removing MooTools from the page also means that all MooTools-dependant scripts will fail. If you want to ignore all Joomla! functionality in favour of the MageBridge functionality, you can simply set Disable all Joomla! scripts to Yes. But this will render some Joomla! extensions useless - also the extensions that actually do not require MooTools to be loaded. If you want try to use those extensions anyway, you need to customize which Joomla! scripts should be loaded and which not.

It's only recommended to tune this if you are capable of reading (and understanding) the HTML-source in the browser. Also you need thorough testing with every step you take: The goal is to make sure no errors occur in for instance the Firefox Error Console, but also that pages like the Magento checkout still function in all browsers.

Tags: magebridge

About Yireo

Yireo tries to help webdevelopers build successful Joomla! and Magento sites.

More about Yireo