Yireo - Extensions, tutorials and blog for Magento and Joomla!

MageBridge experiments: FrotoType and FooTools

Wednesday, 26 May 2010

Sometimes things get weird with MageBridge: We are continuously experimenting with things like JavaScript-compatibility and security, and these experiments sometimes are so usefull we put them into the main MageBridge distibution: The experiments with MooTools and ProtoType bring a good example.

Quick word on the conflict

Joomla! brings out of the box a lot of graphical effects (sliders, tabs, modal popup) which add to the usability of the backend. Because these effects are hard to write, the power of open source is applied by writing these effects using the MooTools JavaScript framework. A lot of third party extensions use MooTools as well on the frontend, to enhance the visitor experience as well.

The people of Magento have the same mindset, but instead of using MooTools they use ProtoType (and it's little brother Scriptaculous). Now because MageBridge allows you to integrate Magento into Joomla!, it also brings ProtoType effects to Joomla!. But here is a problem, because ProtoType and MooTools do not work together on the same page.

Living with MooTools and ProtoType

Most Magento pages require ProtoType (for instance: the checkout is filled with JavaScript). So if you integrate these Magento pages in Joomla! using MageBridge, this brings the requirement to disable MooTools on those pages. MageBridge allows you to do this with a few mouseclicks.

Of course this will cripple any Joomla! plugin and/or Joomla! module which depends on MooTools, but at least the Magento e-commerce pages work fine. If you plan your site carefully (and you always should) this is actually no problem at all - it requires just some simple logic: Why put a fancy slideshow on a product-page, while actually all the attention should be drawn to the product itself?

Regular Joomla! pages

But when dealing with regular Joomla! pages (so not the Magento pages wrapped into the MageBridge component-area, but for instance the blog-pages), you still might want to display a listing of Magento products or the shopping cart, somewhere on the left or right.

For displaying Magento products there is no problem. MageBridge brings you a dedicated products-module with a lot of options to customize the list. The shopping cart is no problem either - MageBridge gives you a cart-module which actually picks up the original Magento cart-block and dumps it into Joomla!. This works very effectively, except for one issue: The original Magento cart requires JavaScript.

A shopping cart and a slideshow on the same page

So as soon as you configure the Magento cart on a Joomla! bug, the ProtoType framework is loaded and MageBridge will try to disable MooTools. Adding a Magento cart on the same page as a Joomla! slideshow seems possible. There are a few work-arounds here:

• Write your own shopping cart module (which requires PHP-programming and MageBridge-experience)
• Use a slideshow-module based on jQuery, because jQuery and ProtoType work just fine togeher
• Disable all JavaScript in the cart-module

Actually the last option is interesting: If the cart would not need any JavaScript, there is no conflict in frameworks. Problem solved.

Is JavaScript really needed for the cart-module?

So is ProtoType really required for the shopping cart-module? We decided to take a look, and found that the cart-module only contained two calls to the JavaScript-framework of ProtoType:

• decorateList: Some weird attempt to alter CSS through JavaScript which is completely useless
• setLocation: A simple JavaScript-function to redirect to other pages

Meet FrotoType

So instead of loading ProtoType (300Kb+) we decided to load our own replacement FrotoType (500 bytes) which replaced those two functions with our own: The decoration-effect was dropped altogether while the redirect-function was rewritten with one line of JavaScript code.

Now, you can disable JavaScript through a parameter in the MageBridge Shopping Cart module, and once this is done, ProtoType will not be loaded but FrotoType will. This allows the cart-module to be used while not experiencing any problems due to JavaScript-problems.

Meet FooTools

We are working on replacing more of these JavaScript-calls in either ProtoType or MooTools. In MooTools, this replacement is called FooTools. For sure, we will not rewrite the entire MooTools-framework to a ProtoType-version (or vice versa). We're not that masochistic. But at least these tricks offer quick-fixes for a common problem.

Only the names (FrotoType, FooTools) seem a bit weird.