MageBridge makes it possible to combine two applications within one single website, but because these applications were not written with the other application in mind, strange situations may occur. In this tutorial we will discuss some of these issues, for instance duplicate class-names or IDs, and how to alter the Joomla!TM user-form to support MagentoTM a bit more.
Duplicate HTML-entities
When the HTML coming from Magento is inserted into the Joomla! page, there might be duplicate IDs used by various HTML-elements. If so, you will need to fix this most certainly, because the incorrect HTML may cause JavaScript not to work at all.
To change HTML there are two alternatives: Make your changes in Magento or make your changes in Joomla!. Because Magento is much harder, we'll opt for the Joomla! alternative here. A lot of Joomla! components and modules implement the MVC-pattern, which means you can easily create changes using template overrides (basically: copies of the original files within your own template-directory).
See the Joomla! Documentation project for more information on overrides.
Altering the user-form
By default, Joomla! makes a distinction between the username and the email-address. In Magento however the username is the email-address. When browsing through both applications the login-forms make this difference also apparent: With a Joomla! login-form (mod_login) the visitor is asked to enter its own username, while within Magento the visitor is asked for its email-address. As you can read in our tutorial MageBridgeTM scenarios, the email-address should be considered leading in this.
The first step towards an integrated look-and-feel would be to change the word username into email-address, which could be done by altering one of the INI-files in the Joomla!-folder languages. However when a Joomla! user is navigating to its own account, it's allowed to change its own email-address, but not its own username. But in Magento, customers are allowed to change their email-address which is in fact their username. To duplicate this behavior we would need to alter the Joomla! user-component to allow us to alter the email-address.
Template overrides
Altering a component is generally speaking a bad thing. As soon as you upgrade Joomla!, there are good chances that your own changes are overwritten again. To allow you to change things in a component, Joomla! has introduced the concept of template overrides. A template override allows you to copy a layout-file within a component to your own template-directory. This copy can be edited freely, while the original file stays in place. Upgrades may overwrite the original file, but not your copy, which is overruling the original file.
But sometimes a template override is just not good enough. With a template-override you can alter the HTML-code of a component, but not the inner logic. To explain this a bit more: Joomla! uses the so-called MVC design-pattern to build components in a general way. The MVC-pattern suggests the usage of a Model to store data, a View to show this data and a Controller to determine what to do with the data. When dealing with a form, the form is shown through a View, but storing the form-data a Model and a Controller are used. If you want to change the HTML-code (which can be found within the View-part of the component), you can use template overrides. But if you want to change the PHP-code of the Model or Controller, forget about it. You're stuck.
Fortunately the user-component allows us to alter this email-address without interfering with this inner logic. The HTML-code of the user-component contains a hidden form-element called username, which is picked up by the Controller and stored in the Model. Thanks to template overrides we can make this hidden form-element show on our page as a regular
Tutorials on MageBridge theming
- MageBridge Design Guide
- MageBridge, RHUK Milkyway and the Magento default theme
- MageBridge and module chromes
- Working with JavaScript in MageBridge
- Theming-options in MageBridge
- Template override of fixes.php
- Working with JoomlArt templates
- MageBridge combined theming
- MageBridge template helper
- Using RocketTheme add-ons for MageBridge
- Video: MageBridge addon Rockettheme theme
- Applying XML Layout Updates in MageBridge - (1) Overview
- Applying XML Layout Updates in MageBridge - (2) CMS Page
- Adding custom Magento scripts to the Joomla! page
- Switch between Magento theme and Joomla! template
- Using YOOtheme patches for MageBridge
- MageBridge template overrides
- MageBridge FAQ: Theming
