Using the Magento "magebridge" theme
As an alternative to the Magento Default Theme, you can use the theme magebridge (living in the Magento folder app/design/frontend/default/magebridge). This tutorial explains you how to use this theme, and what this theme has to offer.
Configuring the Magento theme
Within the Magento Admin Panel, you can configure the theme for your webshop by navigating to System > Configuration > General > Design > Themes. Because most of the theming within a MageBridge shop is done within the Joomla! site, a lot of MageBridge shops are fine by just using the Magento Default Theme (configured as default). As an alternative you can configure the Magento MageBridge theme (configured as magebridge), which equals the Magento Default Theme but enhances some things specifically for MageBridge.
Within the configuration, you can enter magebridge as setting for Templates (PHTML-templates). Other parts of the Magento theming engine are not modified by the MageBridge theme. Note that previous versions of the MageBridge theme also included XML-layoutfiles, which are not included anymore.
@todo: Fix the screenshot above, which should not show a value in the Layout textbox.
MageBridge PHTML-template: Page overrides
Within the folder app/design/frontend/default/magebridge/template/page, the various root-templates (like 3columns or 2columns-left) are overridden. Within Magento, the XML-layout allows you to define a specific root-template for various pages. For instance, the 2columns-left layout (in which the right column is missing) can be used for categories, while the 2columns-right layout (with no left) is used for products. So, in Magento, using XML-layout files, the logic of whether a left-column or right-column is determined by choosing a specific root-template.
But this makes no sense when displaying Magento blocks in Joomla!. Joomla! uses an entirely different logic to determine whether to display columns or not - most commonly, it checks whether the specific column (or: module-position) contains any Joomla! modules, and if not, it hides the column. To make this Joomla! logic flexible, it's best to remove as much Magento logic as possible. To do this, the magebridge theme overrides the complex root-templates of Magento with bare-minimum templates - they don't look good at all in Magento standalone, but within Joomla! they allow for all the flexibility you need.
All of the magebridge root-templates contain the same code: It removes the blocks header and footer (and all the subblocks they might have contained). It also strips all the unnecessary HTML-code from the root-template. The end result is that the root-template actually displays mainly the 3 parent-blocks you would use in your Joomla! site: content (used for the MageBridge component), left and right (used for Joomla! modules).
MageBridge PHTML-template: Catalog overrides
The PHTML-templates in the magebridge theme also contain some tricks for the catalog:
- The PHTML-template catalog/product/view/media.phtml modifies the product imagebox by removing the original Magento slider and replacing it with HTML-code suited for Lightbox-effects. Within Joomla!, various extensions can then be used for creating the actual Lightbox-effect. Check this tutorial for more information.
- The PHTML-template catalog/product/list.phtml is a copy of its original, but enhances the product-listing with a listing of the current subcategories (just like VirtueMart does).
- The PHTML-template magebridge/product/addtocart.phtml contains a specific add-to-cart block that can be used in custom XML-layout or when integrating MageBridge with popular CCKs like ZOO, FLEXIcontent and K2.
Copying files to your own theme
If you are using already your own Magento theme, our recommendation is to copy the files you need from the MageBridge theme-folder to your own folder. This way you can make sure all changes are kept when upgrading MageBridge and/or Magento.Created on Friday, 11 March 2011
Modified on Thursday, 10 May 2012
More tutorials in this section
- MageBridge FAQ: Theming
- MageBridge template overrides
- Switch between Magento theme and Joomla! template
- Adding custom Magento scripts to the Joomla! page
- Applying XML Layout Updates in MageBridge - (2) CMS Page
- Applying XML Layout Updates in MageBridge - (1) Overview
- MageBridge template helper
- MageBridge combined theming
- MageBridge Design Guide
- Template override of fixes.php
- Creating template overrides to support MageBridge
- MageBridge and module chromes
- Theming-options in MageBridge
- Using Lightbox in MageBridge
- Using JoomlArt patches for MageBridge
- Joomla! module-positions in Magento PHTML
- Using the Magento "magebridge" theme
- Adding the Magento header to the Joomla! template
- Hiding and showing module-positions with MageBridge
- Using the MageBridge Products Slider module
- How to change "Continue Shopping Url" on success page?