MageBridge combined theming

Combined theming is the Yireo term for reusing the Magento theme inside the Joomla! CMS. MageBridge allows you to reuse Magento HTML inside Joomla! (amongst other features), but without some kind of theming, this HTML will not look usable at all. There for, MageBridge forwards the Magento theme to Joomla! and tries its best to merge everything from the Magento theme (CSS, JavaScript) inside the Joomla! template.


The result is that by default the Magento blocks as they are shown inside Magento stand-alone, are displayed in more or less the same way within Joomla!. It is your job as webdeveloper to tune both themes as you see fit. This guide lays down the first steps.

Magento blocks

blocksWithin Magento, HTML is structured in so-called "blocks". There are Content Blocks and Structural Blocks, but within theming only Structural Blocks are of importance. The Magento theme uses a complex process to produce the final HTML: First, logic about the pages and structure are defined within XML (so called XML-layouts).

Next, these XML-layouts are parsed by the Magento application which then calls various modules (extensions) using their Block-classes. These Block-classes again call specific PHTML-files (which offer a combination of PHP and HTML), which produce the actual HTML.

The "content" block

Magento blocks are forwarded to Joomla! using MageBridge. Within Joomla! you will find that MageBridge offers its own Menu-Items to use when building Joomla! menus. These Menu-Items point to the MageBridge component. The MageBridge component shows a single block within the component-area of the Joomla! template: A Magento block with the name "content".

Within Magento, modules can add smaller blocks inside or outside the "content" block, but if a Magento module is responsible for a specific page, it is supposed to either use the content-block or remove it.

In short: The Magento block "content" equals the Joomla! component-area.


Extra Magento blocks

Besides the "content" block there are a lot of other blocks defined in the Magento theme. Some may be part of the "content" block itself. Some may be displayed outside of the "content" block. Now, all (!) of these Magento blocks can be reused in Joomla! using the MageBridge Custom Block module.

Note that Magento "modules" are not at all the same thing as Joomla! "modules". Its best to see "modules" in Magento as "extensions", while the term "extensions" in Joomla! not only refers to modules, but also components, plugins, language packs and templates.

A Magento block could be displayed using MageBridge modules inside the Joomla! page, but the location where the block is coming from (for instance the Magento parent-block "left") is unrelated to the Joomla! module-position the module is using (which could be the module-position "right").


Page assignment with MageBridge

One common problem while using MageBridge is page assigment. Lets say you use the MageBridge Custom Block module to display the Magento block "cart_sidebar" within Joomla!. Using the Joomla! Module Manager the cart could easily be placed in some template-position "right" or "left". It does not matter where the block came from.

But on some pages the Joomla! module "cart" is empty. The reason for this is that the original Magento block is most probably empty as well. On some pages, the Magento theme removes certain blocks - for instance, by default the Magento checkout-pages do not have a left-sidebar. So if the Magento left-sidebar is gone, the "cart" block (which used to be there) is gone as well - there is nothing for MageBridge to display.

The problem here is that Joomla! and Magento handle page assignment (or "Menu Assignment" as Joomla! likes to call it) differently. The only way to bypass this problem is to adapt either your Joomla! template or Magento theme. The Yireo tutorials will help you with this.