The product page is one of the most important parts of your store. That’s why so much attention is paid to make this page look perfect.
Read also: Resource model for Magento product flat tables.
Tabs is a good way to display a lot of data inside a compact block. It helps to avoid huge scroll bars and also looks much nicer on portable devices. You can find tons of Magento templates with tabs on the product view page and we are going to tell you the easiest way to add them there. All examples are applicable to the default Magento theme, but with practice you can use following methods to customize your own theme. First, go to your store theme folder and find there the following file app/design/frontend/default/yourtheme/layout/catalog.xml. If the file does not exist, you can always copy it from app/design/frontend/base/default/layout/. Note that your own theme can be located within a different path. In the file catalog.xml, find the section:
<!--
Product view
-->
<catalog_product_view translate="label">
<block type="catalog/product_view" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
<label>Bottom Block Options Wrapper</label>
<action method="insert"><block>product.tierprices</block></action>
<block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
<action method="append"><block>product.info.addtocart</block></action>
<action method="append"><block>product.info.addto</block></action>
</block>
After this section, insert the block below:
<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>description</alias>
<title>Description</title>
<block>catalog/product_view_description</block>
<template>catalog/product/view/description.phtml</template>
</action>
<action method="addTab" translate="title" module="catalog">
<alias>additional</alias>
<title>Additional Information</title>
<block>catalog/product_view_attributes</block>
<template>catalog/product/view/attributes.phtml</template>
</action>
</block>
As you can see the tabs are being added within the built in method ‘addTab‘. In the node, you can select your own block and phtml file which you expect to see inside the tab.
In our example, we have added two tabs ‘Description’ and ‘Additional Information’. Magento installation contains both phtml files so if you can’t find them in your own theme you can copy it from app/design/frontend/base/default/template/catalog/product/view/. First tab will contain the description of the product and second tab will be a list of additional product’s attributes. As we’ve already said you can add your own blocks as the tabs. Don’t forget to clean Magento cache after this operation.
Second, you need to copy the following file app/design/frontend/default/modern/template/catalog/product/view/tabs.phtml into app/design/frontend/default/yourtheme/template/catalog/product/view/ . This file contains mockup for the tabs section.
Third, you should add styles for the tabs. Go to your general css file (usually skin/frontend/default/yourtheme/css/styles.css) and add the lines below:
/* Product Tabs */
.product-tabs { margin-bottom:15px; border-bottom:1px solid #666; background:#f2f2f2 url(../images/bkg_tabs.gif) 0 100% repeat-x; height: 25px;}
.product-tabs li { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }
.product-tabs li.first { border-left:0; }
.product-tabs li.last { border-right:0; }
.product-tabs a { display:block; padding:6px 15px; color:#444; }
.product-tabs a:hover { background-color:#ddd; text-decoration:none; color:#444; }
.product-tabs li.active a,
.product-tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }
.product-tabs-content h2 { display:none; font-size:12px; font-weight:bold; }
Finally we have got to the last step. Go to the file app/design/frontend/base/default/template/catalog/product/view.phtml (if there’s no such file you should already know where to get it) and insert the following line somewhere you would like to see the tabs section:
<?php echo $this->getChildHtml('info_tabs') ?>
That’s all. To be sure that everything going well try to clean up the cache after every step. Good luck and feel free to ask any of your questions. :)
You may also want to read:
