Adding Tabs in Product View Page – A Magento Way!

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?

Source : http://subesh.com.np/