Yireo tutorials

Learn more about Joomla!TM and Magento
You are here: Home Tutorials MageBridge MageBridge theming MageBridge Design Guide

MageBridge Design Guide

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

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

Joomla! uses MooTools, Magento uses Prototype - MooTools and Prototype do not work together on the same page

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 $.

The same global namespace

Magento uses similar frameworks like Prototype. These frameworks also rewrite their namespace. But unfortunately they both choose by default for the namespace $. This causes a conflict in which either MooTools or Prototype does not work (depending on which framework got loaded first). The solution is straightforward: Make sure one of the frameworks uses a different namespace, or get rid of one of the two.

The first bump in the road here is that neither MooTools or Prototype does allow renaming its namespace. With other frameworks like jQuery this is possible (jQuery.noconflict), but there seem to be little efforts into making MooTools and Prototype rename their namespace. Within the Magento community there's some talk about MooTools-based themes, but the real challenge is to remove Prototype from the Magento-pages. The better choice would be to remove MooTools from Joomla!.

Removing MooTools from your Joomla! page

Use different module-positions and page assignment to prevent JavaScript conflicts

We are talking here about the frontend of Joomla!. If you want to remove MooTools from the frontend, make sure the frontend-template does not require it. Next, find any extensions that requires MooTools and try to fix it. When looking at components, note that there's always just one Joomla! component on the page, so if you run into problems with a third party component, it's due to MageBridge modules. The best choice is to remove the corresponding MageBridge module from that page using the module-parameters (Page Assignment).

If it's due to third party modules on the MageBridge component page, you can remove the third party modules using Page Assignment. Alternatively you could also modify your template as follows: Create a specific module-position in your template (for instance "left-nomage") and assign any of the conflicting Joomla! modules to it. With the PHP-code below, you can automatically prevent those modules from being loaded when the MageBridge-component is displayed.

< ?php if($this->countModules('left')) { ?>
<jdoc:include type="modules" name="left" />
< ?php } ?>
< ?php if(MageBridgeTemplateHelper::hasLeftColumn() == true) { ?>
<jdoc:include type="modules" name="left-nomage" />
< ?php } ?>

About plugins

There is no page assignment for Joomla! plugins

Another story are plugins. Following the Joomla! standard, MageBridge plugins do not add HTML to the page. They work under the hood and do their thing, regardless of the output. However, there are third party plugins that add HTML and JavaScript to the page. Though plugins were not supposed to work that way, they sometimes do. And the downside here is there is no parameter Page Assignment for plugins. The normal solution would be to remove the plugin alltogether.

However, the MageBridge Configuration contains another solution under the Theming-tab: If you enter in the parameter Remove JavaScript the web-path to the conflicting JavaScript-file, the system-plugin will remove this path from the HTML-sourcecode, just before the HTTP-reply is sent back to the browser. This works in most cases where plugins add JavaScript-files to the HTML-header, but it doesn't work if other JavaScript code inside the HTML-source depends on it.

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

RocketTheme modifications for MageBridge

In our YireoTM Shop you can find also various patches for use with RocketTheme templates. By combining an original RocketTheme template with the right template-patch for MageBridge, you can easily setup a MageBridge site without much knowledge of webdesign.

More about the RocketTheme template-patches

Tutorials on MageBridge theming

Tutorials on MageBridge development

 

Payments Methods

Payment Methods