Menu

Magento Header and Footer Integration, Via Ajax

, ,

Often, we need to integrate other platforms (for example Wordpress, phpBB, etc) with Magento. This usually begins with unifying the design and then synchronizing the user account. Towards the end if the cross-talk becomes too complicated, it would be easier to build some specific APIs to tackle this.

Here we are going to walk through a quick and neat way to extract the Magento header and footer, and the inject them into another platform, in the following steps:

  • Create a blank Magento CMS page for the extraction
  • Build Ajax code to retrieve the header and footer
  • Update the HTML page

Create a blank Magento CMS page for the extraction

This is the easiest step.

In the Magento admin panel, create a new CMS page like: ‘Integration Cms Page’.

Under the ‘Custom Design’ tab, in the ‘layout’ menu, choose ‘1 column’. This will provide the Magento default header and footer.

Note that the content of the CMS page cannot be empty, so just put in some place holder like ‘Hello world’, ‘<u></u>’ or so.

Make sure to set the ‘status’ to ‘enabled’.

Before we move on to the next step, preview the CMS page we just created. Search in the source code of the CMS page (right click to ‘view source code’ in most browsers) for markers like “<!– start header –>”; “<!– end header –>”; “<!– start footer –>”; “<!– end footer –>”, or something similar, these are the boundaries of the header and footer.

Build Ajax code to retrieve the header and footer

This is the critical step.

There are usually dynamic elements in the Magento header and footer. For example, in the top links, there are wishlist, shopping cart, login status, etc, and we need to capture these information. In general the client side application, i.e. the browser, handles this behind the scene.

However, this can get quite tricky for most integration methods which take over the control from the browser. And this leads to  the major reason why we want to use Ajax.

There are other ways like adding, into the PHP script, some functions like file_get_contents() to retrieve the target CMS page. However, such requests are made on the server side, i.e. out of reach of the local browsers. As a result, these methods will not be able to capture the activity of the user, and the user is going to see the default header: not logged in, empty cart or wishlist, and etc. To fix this, one would have to manually set the cookies,  which is additional work and error-prone.

Using Ajax, we don’t need to worry about cookies and sessions, since everything is done on the client’s side, the browser takes care of that.

The other major advantage is the speed. Ajax loads multiple pages in parallel rather than in serial. This is a big plus for Magento which tends to be very ‘heavy’, even just for header and footer.

Here, I’m going to outline an example using jQuery (a very popular and useful JavaScript library indeed, you can get it for free: http://jquery.com/).

First, we need to resolve the JavaScript library conflict. jQuery ‘hijacks’ the dollar sign ‘$’ as an alias of ‘jQuery’ in function or variable names. Unfortunately, many other JavaScript libraries follow the same practice. So the first thing to do is:

[codesyntax lang=”javascript” lines=”fancy”]

jQuery.noConflict();

[/codesyntax]

And after that, we must use ‘jQuery’ everywhere explicitly, instead of ‘$’.

Next, we need to make an Ajax request to the CMS page we created. Remember the markers we searched in the previous section, we can use them to parse the Ajax response for the header and footer. Avoid converting the response to a DOM object and then traversing the tree. Keep in mind the format may not be strict, an unclosed tag could break the code. Just use string search. It’s safe.

Next we have to determine when to update the page. We have to make sure both the Ajax request and the HTML document are ready. We need to create two Boolean variables: ajaxReady and docReady as status flags. Make sure to check docReady after the Ajax request, and ajaxReady in jQuery(document).ready(function(){…});

[codesyntax lang=”javascript” lines=”fancy]

var updatePage = function(){
    jQuery("#magento_cms_header_placeholder:first").html(magentoCmsHeader);
    jQuery("#magento_cms_footer_placeholder:first").html(magentoCmsFooter);
    jQuery('body:first').removeAttr('style');
}

[/codesyntax]

The above function would insert the header and footer and show the page content.

Update the HTML page

We need to modify both <head> and <body> element

Firstly, add the Magento JS and CSS files to the <head> element. An easy way to do this would be copying them from the source code of the CMS page created above, and then attach the latest jQuery and the script we built above.

It would be nice to take the URL of the CMS page out of our Ajax and put it in to the HTML.

[codesyntax lang=”javascript” lines=”fancy”]

<script type="text/javascript">
    var magentoAjaxIntegrationReuqestOptions = {url: 'http://MAGE_BASE_URL/integration_cms_page'};
</script>

[/codesyntax]

Then in the <body> element, add the placeholders:

[codesyntax lang=”html4strict” lines=”fancy”]

<div id="magento_cms_header_placeholder"></div>
<div id="magento_cms_footer_placeholder"></div>

[/codesyntax]

One final touch is to make sure the <body> element is invisible until both the Ajax code and the DOM are done loading. You can simply use something like: <body style=”display:none”>. The Ajax code will change the body content back to visible once loading is finished.

By far, we are done with all the heavy lifting. However, to unify the design in full, it takes a lot of tweaking and baby sitting of JS and CSS, plus resolving the conflicts between different platforms. After all design is more about art rather than technology.

Related Posts