Yireo tutorials

Learn more about Joomla!TM and Magento
You are here: Home Tutorials MageBridge MageBridge theming Theming-options in MageBridge

Theming-options in MageBridge

The Theming-tab of the MageBridge configuration in Joomla! contains many settings to manipulate theming with MageBridge. Because the final webpage is a result of both Joomla!TM as MagentoTM, the MageBridgeTM options allow you to turn on or off various parts. This article explains more about the actual usage of those options.

Default settings

If you have just installed MageBridge and want some results out of the box, it is nice to display the entire Magento theme (perhaps the default Magento theme) inside Joomla. For this, none of the Magento stylesheets should be disabled (Disable specific Magento CSS is not selected and Disable all Magento CSS is set to "no") and the setting Disable MageBridge CSS should be set to "yes".

Under normal circumstances (and unless you know what you're doing), you should never disable any Magento JavaScript. To make sure the Magento scripts are working, it is important to disable any conflicting scripts. If you don't have a clue what this means, set Disable all Joomla! scripts to "yes".

This will make sure MageBridge functions correctly, but this might also cripple other third party extensions - either plugin, module or template.

Understanding combined theming

MageBridge uses a thing called combined theming - which means that the Magento theme and the Joomla! template are merged into one single webpage. If both your themes match (read: optimized for MageBridge), things look nice in MageBridge. But in most cases, you will need to customize either the Magento theme or the Joomla! template to really make it fit.

When combining two themes, there are several things that could go wrong. This could involve minor glitches in the visual appearance, but also things that stop the page from working. Notorious are conflicts between JavaScript scripts that cause Magento script to crash.

You should realize that the MageBridge settings allow you to disable or enable various parts in either theme, but it does not actually change the theme. For instance, disabling all Joomla! JavaScript will make sure at least the Magento JavaScript is working. But it doesn't mean that your problem is solved. If you want a good site, you need to do more work and read through more of our tutorials. This is why MageBridge is a webdesigners tool and not a simple click-and-go solution.

Playing with JavaScript

We only recommend disabling Magento scripts if you are willing to take part in the experiment to remove the Prototype-framework from Magento. In all other circumstances, you want to disable any Joomla! script that conflicts with the Magento script. By default, all Joomla! scripts are removed from MageBridge pages. This gives you the benefit that MageBridge is functioning.

If you want to find out which Joomla! script is actually causing the problems, you can try out the other options. First you can set Disable all Joomla! scripts to "no". This will enable all Joomla! scripts again, but also cripple the MageBridge pages. In most cases, loading MooTools causes the conflict with Magento, so it is recommended to set Disable Joomla! MooTools to "yes".

Most likely MooTools was added by a third party extension - either a plugin, template or module. That extension most likely stops functioning. But because MooTools had been removed, but the scripts of the extension are not, this might still give errors. For this, you need to enter the path of the script (excluding the hostname) in the textbox Disable specific Joomla! scripts.

Settings within the MageBridge configuration

CSS settings
Disable Magento CSS With this option set to Yes, none of the Magento stylesheets will be integrated into the header. This requires you to put all the Magento styling definitions within the Joomla! template. Our template-patches available in the YireoTM Shop require this option to be set to Yes. If you decide to override certain Magento stylesheets but not all stylesheets, you can set this option to Custom to choose which specific stylesheets should be removed from the original listing.
Disable MageBridge CSS The Joomla! component of MageBridge also is able to bring in some extra CSS. The CSS-file could even be overriden using a Joomla! template override. By default, the file contains some quick fixes for common Joomla! templates, but once you choose for a custom design or one of our template-patches, we recommend you disable this setting. Unless you actually need it, it's save to set this option to Yes.

 

JavaScript settings
Disable Joomla! scripts Because most JavaScript in Joomla! is based on MooTools, Joomla! scripts can cause errors when combined with Magento ProtoType. Our recommendation to get things working quickly is to set this option to Yes: This cripples some Joomla! extensions, but at least makes sure that Magento is working fine. Instead of disabling all Joomla! scripts, you can also choose to disable only those scripts that cause a conflict. This is much more time-consuming and error-prown, but it allows you to finetune JavaScript behaviour much more.
Disable Joomla! Mootools In almost all cases you'll want to disable MooTools (so keep this setting set to Yes), because it is just not working together with ProtoType (loaded by Magento). Only if you're willing to play around with JavaScript, you could opt for disabling this setting.
Disable Magento scripts Unless you're an expert, you don't want any scripts to be selected here (select None). Disabling a Magento script here might cripple your site.

Flush module positions
Flushed positions for homepage These configuration options are a bit more complicated to describe, and they require a solid understanding of Joomla! templating: Within a Joomla! template, module positions are used to place Joomla! modules on the page - positions are named "left" or "user1". But the design of the Magento homepage might look bad, if the columns "left" and "right" are loaded at the same time. Still, Joomla! Menu Assignment only allows you to disable or enable those module positions for the entire MageBridge component, and not just for the Magento homepage. Instead of messing with PHP-code in your template, you can use these options to empty all modules on a certain position. Multiple positions can be defined here as a comma-seperated list ("left, user1, user2").
Flushed positions for customer-pages The same but applied to all Magento customer-pages (a Magento URL starting with "customer/").
Flushed positions for product-pages The same but applied to all Magento product-pages (a Magento URL starting with "product/").
Flushed positions for category-pages The same but applied to all Magento category-pages (a Magento URL starting with "category/").
Flushed positions for shopping cart The same but applied to the Magento cart-pages (a Magento URL starting with "checkout/cart/").
Flushed positions for checkout-pages The same but applied to all Magento checkout-pages (a Magento URL starting with "checkout/").

 

Other settings
Template MageBridge is able to load a specific Joomla! template on MageBridge pages. This allows you to run a normal Joomla! website based on a normal Joomla! template, while running a specific MageBridge-tuned Joomla! template on all MageBridge pages.
Module Chrome Instead of relying on the <jdoc:include> tag to define which chrome should be applied to a certain module, you can define a specific chrome for all MageBridge modules here. For instance, the chrome "raw" fits in nicely.

Tutorials on MageBridge theming

Tutorials on MageBridge development

 

Payments Methods

Payment Methods