Tutorials for Magento and Joomla! - Yireo

MageBridge template overrides

While the Joomla! component of MageBridge is MVC-based, creating a template override is not as straight-forward as you might think. This guides explains the details of how to use template overrides.

Joomla! template overrides

Within Joomla!, a component or module that is based on the MVC design pattern, separates logic from design - within the extension you can find so-called layout-files that can be copied to your own template-folder. This way you can modify the HTML-layout of that extension, without editing the original file - which would classify as a core hack.

More information on Joomla! template overrides can be found here.

Where does the HTML of MageBridge come from?

With MageBridge, things are a little bit different. Part of the HTML is generated by the MageBridge extensions in Joomla!, but the majority of all HTML is generated by the Magento theming layer. There for if you want to modify the HTML-code, most likely you will need to modify the underlying PHTML-templates.

Modifying Magento PHTML-templates is not part of MageBridge, but part of common Magento webdesign. Consult the Magento Designers Guide for more information.

Overriding HTML

Within MageBridge modules and the MageBridge component, there is still an amount of HTML-code that can be overridden through Joomla! template-overrides. Some MageBridge modules (like the native shopping cart or the MageBridge Products Module) are completely generated in Joomla!, so their layout can also be modified through template overrides.

For example, the products-module has three layouts (default, menu and slideshow). The default layout is defined in the following file:

modules/mod_magebridge_products/tmpl/default.php

This can be copied to your own template-override folder:

templates/TEMPLATE/html/mod_magebridge_products/default.php

Most likely, you will never override anything of the MageBridge component, because all interesting HTML-code is located within the Magento theme instead.

Overriding CSS

Besides HTML, MageBridge allows you to override CSS-code. MageBridge pushes the Magento theme into the Joomla! template, and you there for have two options: Use the Magento CSS-code or use the Joomla! MageBridge CSS-code.

MageBridge adds by default a CSS-file media/com_magebridge/css/default.css which tries to fix common things in a Joomla! design, but is not a perfect solution. If you want to modify that file, copy it to your template like the following:

templates/TEMPLATE/css/com_magebridge/default.css

When using the MageBridge CSS-file, you need to save the setting Disable MageBridge CSS to No, and it is also recommended to set Disable Magento CSS to Yes.

Overriding JavaScript

Though maybe not as usefull, it's also possible to override JavaScript used by MageBridge. For instance, if you want to modify the FooTools-experiment (trying to replace MooTools with ProtoType-compatible calls), you can create the following override:

templates/TEMPLATE/js/com_magebridge/footools.js

It should be noted that overriding HTML and overriding CSS is very common, but overriding JavaScript should be left only to the experts - it's not supported.