Tutorials for Magento and Joomla! - Yireo

Why do I need an extra Magento theme?

Theming with Magento can be daunting - it takes a lot of effort to understand the structure of XML, PHP and XHTML. Wouldn't it be great to just use Magento inside Joomla! without the need of theming on the Magento-site? Why is a Magento theme even needed?

The reason for this is simple: MageBridge allows you to bring a shopping cart to Joomla!, but Joomla! doesn't know anything of this. If you still need to style the HTML-elements involved in this cart (which you do), you'll need theming apart from your Joomla! template. Now MageBridge could introduce its own theming engine, but this requires you to learn that theming engine as well. It's a lot smarter to just use the Magento theme.

We have decided to bridge the two applications, not reinvent the wheel. The Magento theming system is much more powerfull than Joomla! - let's use that, instead of ignoring it. With PHTML-code and XML-layouts you can decide on which page the shop should behave in which manor. If you don't dislike the default behaviour, don't change it - use the default theme instead.

As a half-way solution you can still use the default Magento theme, and override any CSS in your own tmeplate. If this means you don't need a certain Magento stylesheet anymore, you can disable that CSS-file in the bridge.

Here at Yireo we will also release techical articles and video-tutorials, that help you into using Magento, Joomla! and MageBridge. You have choosen for a very powerful combination - it just takes some effort to use that power.

Will MageBridge work with my Joomla! template?

Yes, it will. But as the Magento webshop brings in a lot of extra HTML, your standard Joomla! template will probably not support this. To put it more simple: Magento brings for instance a shopping cart to Joomla!, but your template will not know how to style this shopping cart. In your template there is no CSS-class called "mini-cart", is there? Instead you need to look for a Magento theme to style the new XHTML-elements belonging to the shopping cart.

MageBridge combines the Joomla! template of your Joomla! website as well as the Magento theme belonging to the choosen Magento store in one single page. In most cases this turns out ok, but sometimes the CSS-definitions of both themes conflict. You can solve these CSS-conflicts by either changing the Joomla! template or the Magento theme - that's up to you.

More importantly there might be conflicts in the JavaScript-code of your theme and/or extensions. For Magento to operate properly you will need to solve any JavaScript-errors in your themes or through more obscure settings in MageBridge. This can get complicated at times.

On the Internet there are a bunch of free Magento themes which you can use. If these fit in your Joomla! template nicely, there is no need to build a custom theme. But if they don't, you need a custom theme. When you decide to build your own theme for MageBridge, you have two choices. Accept the default Magento HTML and style it with CSS, or build a complete new Magento theme. The latter is very complex, but the first option also allows you to extend your own Joomla! template to include CSS-code which styles the HTML coming from Magento - you don't need a custom Magento theme in this case.

MageBridge members also get access to extensive documentation and support. We will release for instance a MageBridge design guide which will help you with setting up the theming of your site.

Are you serious about combining Joomla! and Magento theming?

People have asked us why we take so much trouble into combining the Magento theme with the Joomla! template. Some even have been disappointed, as they would have liked that we would solve the whole theming issue for them. We have to answer this with a bit of sarcasm: Are you serious?

If you realize that there are already hundreds of Magento themes out there, and thousands of Joomla! templates, it's fair game to say that it would be pointless if MageBridge would introduce a third system of theming. Instead we have to realize that both Joomla! and Magento are good in what they do. Now, when bringing the functionality of Magento to Joomla! a simple question comes along: Who is going to style the shopping cart?

We have decided that it would be smarter to focus on combining Magento theme-output with the Joomla! template. This way you can go right ahead and get serious result, as soon as you have both applications up and running. Getting started is one thing, but modifying the themes on both ends to your needs is a bit more complicated. That's why MageBridge customers get access to a large number of tutorials that will guide the webdeveloper through all designing issues.

To give you a hint on how MageBridge changes things: If the shopping cart has a red border, this border is added by your Magento theme. But if you want to get rid of that red border, you don't need to neccessarily change your Magento theme, you can make the change in your Joomla! template just as easy. So instead of complicating things, MageBridge in fact makes things a lot easier.

Does MageBridge use a frameless mode?

No, MageBridge uses neither frame- or frameless mode. The term "frame" refers to HTML IFRAME-elements, which actually do not bridge anything but wrap one webpage inside the other. Instead, MageBridge integrates Magento blocks visually in either the Joomla! component-area or Joomla! modules. This means you can use Magento in a similar way as using VirtueMart in Joomla!.

MooTools or Prototype?

MooTools is added per your choice to Joomla! while when using default Magento themes, Prototype will be part of your Magento site. This is not related to MageBridge, but to your own theming choices. However, we feel we have to provide you with all information possible. It's easier to remove MooTools from Joomla! than it is remove Prototype from Magento.

A Magento block is not working on my Joomla! pages

With MageBridge, you can configure a Magento block within a MageBridge Custom Block module-instance and set it to appear on Joomla! pages. But if the module does not appear on the Joomla! pages, the most likely reason is that the Magento block did not appear in the first place on the equivalent Magento page. The logic is to make sure it exists on the Magento page, only then can you bridge that very same block to the Joomla! pages.

A Magento block is called through a specific name which can be found in the Magento XML-layout files. However, if this XML-code is changed manually or through third party additions, this name might become invalid.

Another common problem is that a Magento block might be part of a parent block (for instance right) that is removed on a certain page. This makes it important to configure the right page layout in Magento.

Your template-patch is messing up the Magento homepage

With our template-patches, we aim to integrate the Magento Default Theme with an existing Joomla! template - decreasing the amount of webdesign you have to do yourself.

If you perform a clean install of Magento, the Magento homepage is empty. Any effort to add custom HTML to it, falls under custom webdesign and is therefor not supported. Only with the Magento demo-content, there is a Magento sample homepage with sample HTML, and our template-patches make no effort of styling this HTML.

A Magento production-site should not be based on demo-content, and even if you do so, most likely you will need to modify the Magento sample homepage: The Magento Forums contain various tricks to add dynamic content to the CMS pages.

A third party extension is not styled properly

When you add a third party extension to Magento, that extension could also add its own CSS-files. Depending on your MageBridge settings, these CSS-files are forwarded to Joomla! or they are not. But most likely, the developer of that module has not put the CSS-code together with MageBridge in mind.

For most of these changes, we can say that you will need to modify CSS-code: Either in your Joomla! template or your Magento theme. In most cases, you can start by copying the original CSS-code to your own CSS-files and modify things from there.