Tutorials for Magento and Joomla! - Yireo

Step-by-step: Adding a custom Magento block

Adding a new Magento block to Joomla! is easy: You can use the MageBridge Custom Block module to easily insert an existing Magento block as a Joomla! module on your page. This guide gives you all the information you need.

The MageBridge Custom Block module (mod_magebridge_block) allows you to create a new module instance displaying a certain Magento block. The Magento theming principle is completely based on blocks, which can be seen as chunks of HTML. Blocks can be placed within blocks and actually the HTML-document as a whole can be seen as a block itself. This theming principle is very flexible, but also difficult to get used to.

Default MageBridge blocks

Within MageBridge you can use the Custom Block module to easily insert a Magento block inside Joomla! by just selecting the right block from a select-box. This includes blocks like:

• Popular Tags (tags_popular)
• Checkout: Progress (checkout.progress)
• Product Tags (product_tag_list)
• Catalog: Left Navigation (catalog.leftnav)

However, this list of blocks is completely dependant on the Magento theme you are using and the extra Magento extensions that you have installed.

Many more block-names

The blocks in the MageBridge Custom Blocks are not defined by MageBridge, but defined by the Magento theme. The default theme includes the definition of several hundred blocks, and all of them can be used within MageBridge.

Even worse, third party Magento extensions can define extra blocks inside either your parent-theme or your own theme, adding more block-names to the theming engine.

The clue is to use the "Custom block" field within the module-parameters. Actually, this feature is much more powerful than the dropdown-box. This really allows you to use any Magento block within MageBridge.

However, you will need to know your Magento theme to find the right block-name.

The Magento XML-layout files

For understanding the Magento theming engine completely, we recommend you to read the official Magento Designers Guide (released by Varien) which gives a lot of insight into the usage of blocks with Magento. We consider this fundamental knowledge to build a successful MageBridge website.

Block-names are defined in the XML-layout files and these can be found in the /app/design/frontend directory of Magento. This directory is home to the Magento default interface and Magento default theme, while you should have created your own directory for your own interface or theme.

Within the layout-folder of a specific theme you will find all the XML-layout files of various modules. These files contain the block-names we are looking for.

Finding the right XML-code

When you open up a XML-file, you will find a complex gathering of XML-tags but only one of them is important for usage within MageBridge: The block-tag (<block>). This tag has a couple of arguments and one of them is "name".

This "name" of a certain block-tag is the name you can use within the MageBridge Custom Block module.

The default Magento theme contains many block-names, but - as you install more Magento extensions - the amount of block-names will grow. A next question would be which block is responsible for what.

Third party Magento extensions

Third parties can also create Magento extensions that add blocks to Magento, but the situation stays the same. They should supply information on how to integrate their block with Magento theming (and there for with MageBridge). For instance, they could document their block with the following code:

<block type="foo/bar" name="foobar" template"foo/bar.phtml" />

or

{{block type="foo/bar" name="foobar" template"foo/bar.phtml"}}

In both examples above the name to use within MageBridge is "foobar".