Different header section for Magento homepage
Different header section for Magento homepage, the easy way
We were working on a client’s site that has a JS slideshow places above the categories menu only on the homepage. With Magento, there are a few possible ways to achieve this, one requires hacking the core code (we didn’t try it but from the tutorial posted it’s absolutely one of the ways to go); or to call the homepage ID with a Block ID–we didn’t explore this either however with our expertise in Magento we know it’s do-able.
Each day we spend a great amount of time doing design, CSS layout and contemplating site structure with usability and accessibility in mind, so whenever we face a new challenge (or request from client), we tend to find solution using plain CSS and markup before we explore other possible method.
Restructure the header section
A Structural Block by itself has no intrinsic meaning if we don’t give it a Content Block. If you are new to Magento theming, think of the Magento template file (e.g. 2-columns.phtml) as a house, and the Structural Blocks (header, left, main, footer) as rooms (compartments); now visualize the Content Blocks as your belongings. Things like stove, refrigerator, sofa, bed, bathtub should go to their respective rooms, hence in Magento we have products/product listing placed in the ‘content’ block, logo and navigation/categories links go to ‘header’ and layered navigation goes to left/right block.
But if you insist to have your bed places in the living room because your Feng Shui practitioner advised you so or because you simply like to sleep in the living room, it’s totally up to you right? So is with Magento, you don’t need to have categories menu placed in the header, and even on the front-end, it looks like it’s in the header, but behind the scene, your visitor doesn’t need to know it is not.
So the first thing we need to do, is move the “topMenu” away from the header block from the page.xml like so:
Make good use of one of the templates
Magento comes with 4 templates located in the page folder. In the real world, you are very unlikely needing 4 templates for a single site, so you can simply use one for homepage – 1column is a logical choice (as the Modern and Default template do). But my homepage is 2columns-left and I want to keep it you said. No problem! 1column is just a name for the template, you can add anything you like inside your template.
Now copy everything inside the 2columns-left.phtml to ’1column.phtml’,
and call the “topMenu”, after your header’s div:
getChildHtml('topMenu') ?>
Because we moved away the topMenu from the header block, now you need to insert the above code to all template files so that your categories menu can show up in the rest of the site–obviously if you use only 2columns-left and 1column, you only need to copy the topMenu code to 2columns-left.
Put it together!
In the above screen shot, you see that we have this code in the 1column:
getLayout()->createBlock('cms/block')
->setBlockId('homepage_slideshow')->toHtml() ?>
This is for the Static Block and is where we are going to place the slideshow.
Go ahead create a static block, name it homepage_slideshow, and place your slideshow code in the content textarea.
Now go to CMS > Manage Page, and open up your homepage, change the template from 2 columns to 1 column, and remember to refresh caches in the Cache Management.
The site we were working has not launched therefor we can’t show you the result, but we guarantee it works long as you follow the exact steps, and have the correct slideshow code (or just an image), everything will work as expected.
2 Comments to “ Different header section for Magento homepage ”