Tutorials for Magento and Joomla! - Yireo

Applying XML Layout Updates in MageBridge - (2) CMS Page

Within Magento theming, XML layout updates are very powerful when it comes to altering the standard behaviour of pages or adding new dynamic blocks to your content. This is the second part of a tutorial that explains you how to apply this within MageBridge/Joomla!.

• Applying XML Layout Updates in MageBridge - (1) Overview
• Applying XML Layout Updates in MageBridge - (2) CMS Page

Using a CMS page for XML Layout Updates

This scenario takes the approach of creating a Magento CMS Page and apply the XML Layout Update to this page. Next, within Joomla! a Menu-Item will be pointing to this page. The nice thing of this is that Magento will apply the XML Layout Update to the page in question, and we will just display this page with basic functionality of MageBridge.

While this approach allows you to use XML Layout Updates, there is also the option to use CMS Markup Tags within your Joomla! content. For these Magento markup-tags to be interpreted correctly, you only need to enable the MageBridge Content Plugin.

Create a Magento CMS Page

Login to the Magento Admin Panel and browse to CMS > Pages. Create a new page or edit an existing page. In this example, we will create a new page. Set the Store View to the scope you want or just All Store Views. Make sure the page is enabled.

You will also need to enter content under the tab Content. If you don't want to actually use this content, temporarily hide the editor and enter some kind of dummy value:

Apply the XML Layout Update

Within the same CMS Page, go to the tab Design and copy the XML-code to the textarea Layout Update XML. You will also need to choose a Page Layout (1 column, 2 column, 3 column). Save the page.

Note that the XML-code above is just an example. There are many different variations possible, but this tutorial is not about explaining the functioning of the XML-code, it's about applying this XML-code to Joomla! pages.

Test the result within Magento

Before jumping to Joomla!, make sure the XML-code works. The new CMS Page can be accessed directly by entering the URL Key within the addressbar of your browser.

http://MAGENTO/random-products

Adding the CMS Page to Joomla!

Login to the Joomla! Administrator and navigate within the Menu Manager to the menu to which you want to add the new page. Create a new Menu-Item and select as type MageBridge > Custom Page.

Configure the Menu-Item as a regular Joomla! Menu-Item: Enter a title, configure the parent-item, set the access-level. On the right side, you'll find the MageBridge-specific parameters: Enter the Magento URL Key as MageBridge Request Path.

Conclusion

That's it: Once you visit the Joomla! Menu-Item, a MageBridge page will be loaded which in effect will load the corresponding Magento page and display the "content" block of that page within the Joomla! component area. Because the Magento "content" block is altered through the XML-code, the end result of this XML-code is also displayed within Joomla!.

• Applying XML Layout Updates in MageBridge - (1) Overview
• Applying XML Layout Updates in MageBridge - (2) CMS Page