Solving JavaScript problems in MageBridge with MooTools 1.2
Monday, 11 January 2010One of the major issues in combining Joomla and Magento into a single webpage is the clash of JavaScript frameworks: Joomla uses MooTools and Magento uses Prototype, and both JavaScript frameworks claim the $ namespace to be used in scripts - there for causing a conflict.
However, now with Joomla 1.6 coming up, it might be that there is some light at the end of the dark tunnel: Joomla! 1.6 ships with MooTools 1.2 which might bring a solution. Let's take a look at the details.
MooTools, Prototype and jQuery
We mentioned already MooTools and Prototype, but actually there is a third framework worth mentioning: jQuery. While MooTools and Prototype are easier to use and offer in general more features, jQuery is much smaller (faster) and more flexible. A lot of the functionality shipped in the MooTools and Prototype cores, can be with jQuery in third party plugins instead.
Even better: jQuery ships already for a long time with a thing called the noConflict-mode which allows the framework to be used in combination with other frameworks as well. To accomplish this, the namespace "$" can be renamed to either a default "jQuery" or something more custom like "$j".
By default, you would write a line like the following:
$("a").addClass("clickme");
With the jQuery noConflict mode you can write the following instead:
jQuery.noConflict(true);
jQuery("a").addClass("clickme");
or:
$j = jQuery.noConflict(true);
$j("a").addClass("clickme");
MooTools version 1.2.3
Now with MooTools version 1.2.3 something similar is being done. Instead of the dollar-namespace "$", you'll need to use "document.id()" instead. If we take the original example:
$("a").addClass("clickme");
it is rewritten to:
document.id("a").addClass("clickme");
MooTools autodetects the presence of another framework like Prototype (by checking if the $ namespace is already in use or not) and will load a different namespace instead. However, this requires all MooTools-scripts to use the new syntax "document.id()" instead as well.
The good, the bad and the ugly
Now let's see for Joomla: The good thing is that MooTools version 1.2.3 (or newer) will be included in Joomla 1.6. The bad thing is that all MooTools scripts need to be rewritten to use the new MooTools-syntax. Perhaps for the Joomla core this task can still be done. The ugly thing is that also all Joomla extensions that use MooTools need to be rewritten.
See also: http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/