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 . 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.

<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
                    <action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>General Info</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>deliverytime</alias><title>Delivery Time</title><block>    catalog/product_view</block><template>catalog/product/view/delivery.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>printinginfo</alias><title>Printing Info</title><block>    catalog/product_view</block><template>catalog/product/view/printing_info.phtml</template></action>
<!--  4th tab -->
<action method="addTab" translate="title" module="catalog"><alias>notes</alias><title>Notes</title><block>catalog/product_view</block><template>catalog/product/view/notes.phtml</template></action>
                </block>

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.

<?php
 echo $this->getChildHtml('product.info.tabs');
?>

After that you will see four tabbed navigation in your product view page. Easy isn’t it?