Tutorials for Magento and Joomla! - Yireo

MageBridge Design Guide

This MageBridge Design Guide sums up all the knowledge required to implement a good theme-combination. Combining Magento themes with Joomla! templates is first of all a webdesign-related issue, but there are specific problems to be solved as well.

Combined styling

With MageBridge, the Magento theme is pushed into the Joomla! template. This allows for quick styling of various elements: By default, Joomla! has no clue how to style the Magento product-page - but by integrating the Magento CSS into Joomla!, the styling is done quickly. The MageBridge configuration allows you to finetune this behaviour and determine which CSS to use where.

The Magento theme is also producing HTML-output, and this HTML-output is divided into logical blocks. Any block existing in Magento can be displayed with MageBridge using the MageBridge Custom Block module.

More about combined theming

MageBridge configuration

Within the MageBridge configuration in the Joomla! backend, various settings can be tuned to determine what MageBridge should do with which CSS-files: Should it use a certain Magento CSS-file or the Joomla!-based MageBridge-file instead? Which JavaScript to load and which not? The configuration also contains settings to hide certain module-positions on certain MageBridge pages - for instance, hide the right-column during the MageBridge checkout.

More about MageBridge theming settings

Using template-patches for MageBridge

On our Yireo site, you can find various template-patches for use with popular RocketTheme templates, YOOtheme templates and JoomlArt templates. By combining an existing Joomla! template with the right template-patch for MageBridge, you can easily setup a MageBridge site without much knowledge of webdesign.

More about MageBridge temlate-patches

Double IDs and classes

Because the HTML of both Joomla! and Magento is combined, you need to beware that the DOM (Document Object Model - the hierarchy of the HTML-document) is still intact and correct. But because both applications were not written with the other application in mind, conflicts could arise. For instance, there could be two HTML-elements both with the same CSS-class, but being styled differently. More importantly, there could be double IDs as well - and as an ID should be always unique, this could cause problems with JavaScript and CSS.

Those double IDs and double classes need to be resolved. This could be done in either Joomla! or Magento. With Magento, this requires knowledge of XML-layouts and PHTML-templates. With Joomla!, this requires knowledge of Joomla! templating. In either case, you also need to have an understanding of HTML and CSS. These are the basics of webdesign.

Conflicts with JavaScript frameworks

For JavaScript-based solutions, Joomla! makes use of the MooTools framework. Thanks to MooTools, effects like sliding panels or the "accordion" are easily created. The MooTools framework is written with the princple "write less, do more" in mind. Part of this philosophy is to base everything on classes with the base-class being the MooTools-class itself. But instead of every line starting with "mooTools()", the class-name is rewritten to "$()". In technical terms, we say that the namespace of MooTools has been rewritten to $.

Read more about this JavaScript conflict

PHP-class MageBridgeTemplateHelper

To make things even easier, we have created a PHP-class called MageBridgeTemplateHelper which allows you to implement simple MageBridge logic in your Joomla! template. To use this class, you will need a good knowledge of Joomla! templating and some knowledge of PHP-code.

More about the MageBridgeTemplateHelper