Adding the Magento header to the Joomla! template

Sometimes a Magento extension might add custom scripts to the Magento block head, but these custom scripts will not be transferred to Joomla! automatically. This tutorial helps you to create a solution that does.

How MageBridge deals with CSS and JavaScript

Normally in Magento, JavaScript files and CSS stylesheets are defined in the XML-layout: This means that - before the HTML-document is generated - these files will be collected and parsed. This allows Magento to perform all kind of neat tricks, like CDNs or static content servers, but also CSS-merging and compression.

MageBridge hooks into this, by collecting the list of CSS-files and JavaScript-files that Magento would be use, and by pushing them into the Joomla! equivalent: In Joomla!, CSS-files are for instance also added through certain framework-calls JHTML::addStylesheet - again to allow you to perform the same tricks as Magento does.

How MageBridge deals with the HTML head-section

Now, the above explains how things can be integrated smoothly. Every HTML-page is built up by a <head>-section and a <body>-section, and certainly with Joomla! and Magento, the <head>-section contains valuable tags like <meta>-tags, the <title>-tag, etcetera. But merging the <head>-sections of both Joomla! as Magento just does not work: A head-section with two <title>-tags would not be correct.

So therefor, MageBridge merges some things automatically (to make sure it happens in the right way): CSS-stylesheets, JavaScript files, title-tags, the META-keywords, META-keywords. But some other things are skipped - some elements of the <head>-section of Magento are not bridged. For instance, custom scripts.

Dealing with custom scripts

When a Magento extension is adding some kind of script to the Magento <head>-section directly - so without XML-methods like addCss and addJs - it can do so in various ways: The Magento <head>-section is actually a Magento block named head with a PTHML-template page/html/head.phtml. Other extensions can overwrite this block or add HTML-code to it. In short: Magento extensions can modify this Magento block.

The trick with MageBridge is to bring this Magento block to Joomla! (by using the MageBridge Custom Block module). But because the default Magento head-block also contains a lot of things that are already bridged by MageBridge, you will need to remove some elements.

Overriding the default Magento head-template

First, we are going to override the Magento head-template. Because in Magento, a core-hack should never be made, the original PHTML-template page/html/head.phtml (contained in the base/default folder) needs to be copied to your own Magento theme (for instance default/foobar). After this, you can modify it.

The default Magento head-template contains a lot of things, that are not needed with MageBridge. Actually, the only things of value are the following two lines - so just overwrite the default content with the following:

<?php echo $this->getChildHtml() ?>
<?php echo $this->getIncludes() ?>

Note that this corrupts the original Magento frontend. Make sure not to use the same Magento theme for both Joomla! as Magento, when making this step.

Adding custom META-tags or extra links to the Magento head-template

Besides basic includes (the two PHP-lines above), you can also add other custom tags to the Magento head-template. For instance, this is needed when dealing with custom Facebook-headers or extra IE-fixes. You can add extra PHP-lines to the Magento head-template to add these custom tags to Joomla!. This approach is needed for the following tags:

Basic meta-tags (<meta name="">) : Adding extra properties like application-name and application-url.
Meta-properties (<meta propery="">): Used for Facebook properties like og:site_name, og:title, og:image or og:description.
Meta HTTP-Equiv tags (<meta http-equiv="">): Used for various purposes among which DNS-prefetching but also setting the X-UA-Compatible tag for IE-browsers.
Link-tags (<link rel="">): Various link-tags exist like the shortlink, image_src, icon, dns-prefetch, sitemap and search. Note that you do not need to transfer the canonical tag, because that's already done by MageBridge.

You can see an example of such a PHTML-template in app/design/frontend/default/magebridge/template/page/html/head_mb.phtml. Note that the lines in that PHTML-template serve as an example, and should not be copied directly in your own theme unless you know what you are doing.

In the end, your PHTML-template could look like the following:

<?php echo $this->getChildHtml() ?>
<?php echo $this->getIncludes() ?>
<link rel="pingback" href="/<?php echo Mage::helper('core/url')->getCurrentUrl() ?>"  />
<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>" />
<meta property="og:title" content="<?php echo Mage::registry('current_product')->getMetaTitle()?>" />
<?php endif;?>

Creating a new Joomla! module-position in <head>

Now that the original Magento head-template is modified, it is safe to transfer the HTML-code of that Magento head-block to Joomla!. We can do so by using the MageBridge Custom Block module - a Joomla! module that allows you to add any Magento block to any sidebar in Joomla!. The exception here is that we are not adding the head-block to a sidebar, we want to add it to the Joomla! header.

For this, a new module-position needs to be created, right after the standard Joomla! jdoc-tag in the header:

<jdoc:include type="head" />
<jdoc:include type="modules" name="head" style="raw" />

Optionally, you could decide to show this module-position only when the MageBridge component is loaded. This would require extra PHP-logic or the usage of third party extensions like Advanced Module Manager.

Adding the MageBridge Custom Block module

Now that a new Joomla! module-position is in place, we need to create a new Joomla! module that displays the Magento head-block. Create a new module-instance of the type MageBridge Custom Block and assign it to the position head. Configure the module to not show its title.

Within the module parameters, configure the Custom Block to be head. Set the Module Layout to raw and configure the module to not load CSS and to not load JavaScript - set both Load CSS as Load JavaScript to No.

Enable the module, and you're done: The modified Magento head-block should now appear within the Joomla! head-section. Check the HTML-source in your browser to confirm this.

Created on Thursday, 25 August 2011
Modified on Thursday, 22 September 2011

Working with JavaScript in MageBridge - Yireo