Use MageBridge with Advanced Module Manager - Yireo

Using HM_FeaturedProducts with MageBridge

FeaturedProducts is a great extension from Mage-World.com, that allows you to build various blocks containing "Featured Products" throughout the Magento system. Just like with any other block, these blocks can also be put into Joomla! using MageBridge.

This whitepaper shows you the extra steps you should take. Actually most of the steps implicate Magento theming concepts, while the final steps in Joomla! are just a piece of cake.

Installation and configuration

First of all, make sure you install the HM_FeaturedProducts extension within Magento. The extension is shipped together with a README-file which contains the basic steps of configuring an attribute named "featured", adding this attribute to an attribute-set and configuring your products to be "featured" or not.

Where are the blocks?

After you have completed all but the final step, you should realize that there is nothing visible yet in the Magento frontend. Because of this there is also nothing to be shown in Joomla! using MageBridge. The final step in the README-file is necessary to create an actual block in Magento.

There are two options:

  • Create the block through a XML-tag <block>
  • Create the block using a CMS-tag {{block}}

Using the XML-code

While the makers suggest to use the easier alternative of XML-tags, we advise you to take a thorough look at the XML-layout - it is the base of the Magento theming system and much more logical to apply your changes there. This extension adds its own XML-layout through the following file:

app/design/frondend/default/default/layout/hm_featuredproducts.xml.

Removing comments

Within the XML-file you will see various blocks which are commented - as long as the comments exist, the blocks will not be defined in the Magento theming engine.

<!-- This is a comment -->

So the first step is to remove the comments for the block you want. Once the comments are gone, the block has become active. Perhaps you need to refresh the Magento cache. To check if the block is active, don't play around in Joomla! - instead make sure you can see the block within Magento as it was ment to be.

Finding the block-name

As soon as you have confirmed the block is there in Magento, you can show the block with MageBridge. For this, only you need to know the name of the block, which is identified by the "name" argument inside the XML-tag <block>:

<block type="featuredproducts/featuredproducts" name="featuredproducts_autosidebar" ...

In this case the block-name is "featuredproducts_autosidebar". Go to Joomla! and create a new module of the type "MageBridge - Custom Block". Within the parameters on the right, add the name "featuredproducts_autosidebar" under the field "Custom Block". That's it.

Understanding the XML-structure

Our opinion is that if you don't understand, you can't fully use it. So before you start de-commenting every block, it's wise to check what is actually accomplished within this XML-code. Let's take a look at the XML-code within the file hm_featuredproducts.xml.

First of all the XML-file begins with a <layout> tag which defines that the XML influences the layout of the website. Next there is a <default> tag (a so-called page-handle) which states that the XML within this tag is applied to all pages by default.

A reference to "content"

Now underneath the <default> tag you will find the following tag (we have removed some of the code):

<reference name="content">
    <!--<block ... name="featuredproducts" ... />-->
</reference>

This makes a reference to another block "content". Within Magento, the block "content" exists for almost all pages and is the area where the catalog is shown and where the checkout occurs. The block "content" is also used by MageBridge as the component-area within Joomla!.

Now this XML does not do a thing, until you remove the comments:

<reference name="content">
    <block ... name="featuredproducts" ... />
</reference>

As soon this is activated, the block will be added to the top of the "content" block. But because the page handle was <default>, this applies to all pages - which is probably not something you want. Either you need to choose a diffferent block or play around with page-handles.

A reference to "right"

Another block makes a reference to the block "right" (which is in most cases located on the right) and adds a little sidebar with Featured Products to it. Also there is an extra <action> tag which allows you to configure this sidebar-block a bit more.

<reference name="right">
    <block ... name="featuredproducts_autosidebar" ...>
        <action method="setShowTotal"><show_total>6</show_total></action>
    </block>
</reference>

Note that using MageBridge, you can take this block "featuredproducts_autosidebar" to Joomla! but assign the module to a different position "left" instead.

About the CMS-tags

Another method to add the block to Magento (and there for Joomla!) is to use CMS-tags or Markup Tags:

{{block type="example/example" name="example"}}

CMS-tags can be added to two different places within Magento:

  • CMS-pages
  • CMS-blocks (also called Static Blocks)

Now with MageBridge the whole purpose of CMS pages is gone, except for perhaps the Magento homepage. More importantly, the same CMS-tags that you can apply to Magento CMS-pages can be applied to any content within Joomla! using the MageBridge Content Plugin.

There's only one downside: The MageBridge Content Plugin does not load any CSS and JavaScript, and because the HM_FeatureProducts extension heavily relies on its own CSS and JavaScript, the Content Plugin is a less preferred solution.

Use CMS-blocks

Instead, we recommend you use CMS-blocks. To forward a block to Joomla! using MageBridge, create a new CMS-block within Magento. Make sure it is enabled and that is is given a logical Identifier. As content you can just put down the CMS-tag as documented by Mage-World:

{{block type="featuredproducts/featuredproducts" show_total="6" name="featuredproducts"
template="featuredproducts/featuredproducts.phtml" }}

Next, within the Joomla! Administrator create a new module of the type MageBridge CMS Block. Add the CMS-block Identifier (and not the name of the block!) to the parameters.

About JavaScript

The HM_FeaturedProducts extension makes heavy use of JavaScript and CSS. For JavaScript, the code calls not the default Magento library of Prototype, but the jQuery library. Within Joomla!, the MooTools framework is used. While Prototype and MooTools byte, jQuery and MooTools do not.

In most cases, this will mean that the JavaScript of HM_FeaturedProducts will work without a problem. In those cases, that HM_FeaturedProducts doesn't work as in Magento, make sure there are no JavaScript-errors visible in the Firefox Error Console. Make sure the JavaScript of Magento is running without problems.

Created on Sunday, 13 December 2009
Modified on Sunday, 13 December 2009

About Yireo

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

More about Yireo