Working with JavaScript in MageBridge - Yireo

Working with JoomlArt templates

JoomlArt (www.joomlart.com) is a template club which offers both Joomla! as Magento themes, both free as commercially. Because they offer Joomla! templates that match their Magento templates, JoomlArt is an ideal choice for MageBridge if you don't want to create your own theme.

However, there is a catch when using JoomlArt themes with MageBridge. Out of the box they don't work perfectly, mainly because Joomla! templates are optimized for Joomla! and Magento themes are optimized for Magento, but neither are optimized for MageBridge. In this tutorial we will you down the steps on how to modify the JoomlArt templates to make them fit for Magento. You will need knowledge of Joomla! templating (HTML, CSS, PHP) to modify your template a bit.

Double skins in Joomla! modules

One of the immediate problems when you start to build a MageBridge website using JoomlArt themes, is that Joomla! modules are double-skinned: The Magento block is styled through the JoomlArt Magento theme, but if the block is displayed within a Joomla! module, it is styled again through the JoomlArt Template theme. The solution is to remove one of the skins.

To remove the double-skinning, the most solid solution would be to modify the Magento theme. The double-skin is caused by CSS, but the CSS is applied to HTML. By removing the right HTML you prevent the double-skinning of a module. But editing the PHTML-code of a Magento theme is hard, while there is a simpler solution available as well.

Extra module positions for MageBridge modules

Within the Joomla! template, every module is shipped with a specific "style" (or module chrome). By default, a lot of module-positions get the style "jarounded" (which causes the nice rounded-corners effect of JoomlArt). You can see this defined in multiple places in the "index.php" file:

<jdoc:include type="modules" name="right" style="jarounded" />

But if you add a second module-position "right_raw" with the style set to "raw", this will prevent additional HTML to be added to the module - thus solving the problem of double-skinning.

<jdoc:include type="modules" name="right" style="jarounded" />
<jdoc:include type="modules" name="right_raw" style="raw" />

The down-side here is that some things are not working perfectly: A JoomlArt template-variable like $ja_right refers to the number of modules on the position "right". If there are no modules on the position "right" but modules on the position "right_raw", these modules fail to show. You will need to add more PHP-code to allow this situation to be handled correctly ($this->countModules). Please see the Joomla! documentation (docs.joomla.org/Web_designers) for more help.

Double CSS-definitions

Because the Magento theme looks like the Joomla! theme, some CSS is defined in both Magento as Joomla!. Because MageBridge can not know about this, it merges all CSS-files in the same HTML-header anyway, resulting in multiple HTTP-requests by the browser. Part of optimizing a page is the minimization of HTTP-requests. The less CSS-files are used, the better the performance.

The MageBridge component in the Joomla! Administrator allows you to disable CSS-files from Magento. Through trial and error you can find out which CSS-files are needed and which are not. In many cases, files like "layout.css", "menu.css" and "css3.css" contain only duplicate CSS-definitions which can be removed safely from the MageBridge page.

But as soon as a CSS-file contains both unique as duplicate CS-definitions, removing the CSS from the MageBridge page will result in incorrect styling. The only way to deal with this properly is to modify the CSS itself. See the MageBridge and RHUK Milkyway tutorial for more information.

The MooTools vs. Prototype conflict

A common problem when combining Joomla! and Prototype on the same page, is that the MooTools framework used by Joomla! conflicts with the Prototype framework used by Magento. The MageBridge component allows for quick work-arounds to this problem. See Working with JavaScript in MageBridge for the whole story.