Hiding conflicting JavaScript with MageBridge
Saturday, 28 November 2009A very small thing that has been improved in MageBridge version 1.2 is the way to remove conflicting JavaScript-files. The whole deal of removing conflicting JavaScript-files is a necessary evil we have to live with: The MooTools-framework of Joomla! is conflicting with the Prototype-framework of Magento. But this removal should above all work properly, otherwise perhaps your Magento checkout might not function properly.
Building up to version 1.2 we released a beta-version to various customers that were in need of sh404SEF-support in an early stage. Together with this, we also tried to clean-up the messy code involved with conflicting JavaScript. As you can find in our tutorials, the best approach for solving the problem now, is to remove MooTools from Joomla!.
Which JavaScript to disable?
The MageBridge configuration includes three options here: Either you only disable MooTools, or you disable some JavaScript files manually, or you disable all non-Magento scripts on the page. It's primarily MooTools that causes problems, but besides the core MooTools-script there might be other scripts (from the Joomla! template, Joomla! modules or Joomla! plugins) that use MooTools and there for cause JavaScript-errors.
The purpose of a clean MageBridge install is to have no JavaScript-errors at all. You can check this using the Firefox Error Console. Any MooTools-script will throw errors because of the Magento Prototype-framework being loaded earlier, or even worse - if MooTools is loaded before Prototype, the Magento checkout just stops working.
But besides MooTools, there might be other scripts that are safe to use (jQuery in compatibility mode, Google webmaster-tools, etcetera). This is the reason why there is, instead of the option "Disable all Joomla! scripts", also an option to configure which actual scripts need to be disabled and which not.
Which method to remove the script?
There are also three methods that can be used to remove these conflicting Joomla! scripts from the final HTML: By replacing the script-name with an empty MageBridge script, by commenting the entire JavaScript-tag or by removing the entire JavaScript-tag entirely.
Probably in development environments it's best to either the comment the JavaScript-tag or let MageBridge replace the original script with the "foo.js" script (which has no content). This way you can see what's happening.
But in production it's better not to use the "foo.js" method - which uses pointless HTTP Requests, thus degrading performance. Also the commenting of JavaScript-tags is less recommended because it will leave unneeded HTML-comments on the page, which costs (very little) extra bandwidth and may even have some unknown side-effect regarding SEO.