Adding Tabs in Product View Page Through Layout in Magento
One of my new colleague, today asked me how to add tabs in product view page in Magento. He told me earlier he had used his own tabs CSS and Javascript to do, but now he found out that Magento gives default Tab Javascript to do the same. Then, I thought why not share with everyone else! Here it goes…
It is extremely easy to add a tab and its Javascript, but comparatively difficult to make its CSS, and I won’t talk about that here :D. You can manage tabs in product page of Magento just through layout files. No need to work on Javascript. Just use the following xml tags inside your catalog_product_view layout.
[source language=’xml’]
additional General Info catalog/product_view_attributes catalog/product/view/attributes.phtml
deliverytime Delivery Time catalog/product_view catalog/product/view/delivery.phtml
printinginfo Printing Info catalog/product_view catalog/product/view/printing_info.phtml
notes Notes catalog/product_view catalog/product/view/notes.phtml
[/source]
In the code above the fourth tab, we have called addTab method of catalog/product_view_tabs block, with the parameters alias as notes, title as Notes, block as catalog/product_view and template as catalog/product/view/notes.phtml.
After adding this in your layout, echo the following in your view.phtml file.
[source language=’php’]
getChildHtml(‘product.info.tabs’);
?>
[/source]
After that you will see four tabbed navigation in your product view page. Easy isn’t it?