Working with JavaScript in MageBridge - Yireo

Hiding and showing module-positions with MageBridge

The MageBridge component displays the Magento content-area in Joomla!, just like any other Joomla! component would. But some Magento pages assume a full pagewidth, so how to make sure that the Joomla! sidebars are gone when this happens? The page assignment of Joomla! is not the same thing as the page assignment of Magento. Here's an overview and a list of solutions.

How Joomla! switches between layouts

With Joomla!, you can design a template that displays a content-area with a left sidebar and a right sidebar. The content-area is occupied by output from the component, while modules fill up the sidebars. Each sidebar is called a module position (or template position), and those positions can be scattered all over the place. Modules are then assigned to a certain position (for instance left or top or user1). But if a position has no modules, the output is blank but the position is still there.

joomla-pagelayout-3column

Using PHP-logic, the template is able to check to see whether a certain position contains any modules. By doing so, it can switch from one layout to another. For instance, if the default layout has a left-column, but the PHP-logic is able to determine that there are no modules to the position left, then the template might be switch to a fullwidth-column layout instead.

joomla-pagelayout-3column

Joomla! modules are assigned to Menu-Items

So the template-layout is actually determined by the Joomla! modules that are shown on a specific page. The next step is to know that Joomla! modules are assigned to Menu-Items. For instance, a menu-module might be configured to appear on all pages. But a login-module might be configured to appear just on a specific set of pages: The pages you configure here are actually references to Menu-Items.

Within Joomla!, this makes sense. Every page is usually available through a Menu-Item, and that Menu-Item determines how the final page is displayed. The Menu-Item is configured to point to a specific component, and component parameters are configured within that Menu-Item. The Menu-Item is referenced by setting an Itemid (a database identifier) in the URL.

joomla-url

Multiple pages can be hidden behind one Itemid

Now the problem is that you might have created one Menu-Item to a single component. But that component might actually create numerous other pages. This means that all of those pages (page1, page2, page3) are referenced by the same Itemid. Assigning the login-module to that Itemid, actually displays the login-module to page1, page2 and page3.

But if you want to assign the login-module only to page1 and not to the other pages. The quick answer is that this doesn't work with default Joomla! page assignment.

The same applies to MageBridge

The same is true for MageBridge. With MageBridge, you bring all (!) of the Magento pages to Joomla!. But logically you will only create Menu-Items for a limited amount of those pages. Assigning Joomla! modules using the regular Joomla! page assignment might offer you enough functionality. But if you want to be very specific about which modules should appear on which pages, then you need to look at different solutions.

Solution 1: Flushing module positions

The first solution is offered by MageBridge itself. Within the MageBridge configuration, you can flush certain module positions for specific pages. For instance, you can flush the module positions left and right for all Magento checkout-pages. MageBridge will detect this setting, override the default JModuleHelper class, and wipe out any module output if it is needed.

mb-conf-flushmodules

Solution 2: Advanced Module Manager (and alike)

If you want to be more specific, not just for MageBridge-pages, but any pages in your site, then you might also opt for NoNumber Advanced Module Manager (or alternative solutions). This extension also overrides the JModuleHelper class, but also enriches the Joomla! Administrator with more features to assign modules. You can assign modules to Menu-Items but also sub-Menu-Items, to components, to specific conditions. For the advanced users, you can even use simple PHP-logic (see solution 3).

mb-nonumber-amm-01

Solution 3: MageBridge Template Helper class

Within the MageBridge code, there is a MageBridgeTemplateHelper class available that offers you various methods for various tricks. These methods can be used in the PHP-code of your own Joomla! template, and offers finetuning of your template-logic. For instance, you can show certain module-positions when a specific product is shown (getProductId() == 22) or when Magento has actually determined to load a specific layout (getPageLayout() == '3column').

Created on Friday, 11 March 2011
Modified on Sunday, 18 December 2011

About Yireo

Yireo tries to help webdevelopers build successful Joomla! and Magento sites.

More about Yireo