In our previous article we have discussed how to add tabs to the product page. After Magento 1.9 has been released people started asking how to handle the product page tabs since the previous method caused different troubles. The reason is in the modern RWD theme, which goes out of the box with Magento 1.9. It uses slightly different method for adding tabs than in the previous versions. So, let’s review how you can easily add own tabs on the product page for RWD-based themes in Magento CE 1.9.
First of all, let’s make our implementations as clean as possible. To avoid copying of unnecessary pieces of code we will make our changes in the layout file that is being used for custom theme’s modifications. You can find this file here:
app/design/frontend/[theme_package]/[theme]/layout/local.xml
There [theme_package] – it’s your package’s name and [theme] – it’s your theme’s name. If there’s no such file – just create a clean one. Then, paste the following content in the newly created file:
<?xml version="1.0"?> <layout version="0.1.0"> <catalog_product_view> <reference name="product.info"> <block type="core/template" name="the_new_tab" as="the_new_tab" template="atwix/newtab.phtml"> <action method="addToParentGroup"><group>detailed_info</group></action> <action method="setTitle" translate="value"><value>The New Tab</value></action> </block> </reference> </catalog_product_view> </layout>
In case if this file already exists – just add the content between <catalog_product_view>…</catalog_product_view> (including them) inside of <layout>…</layout> node.
As you can see, we have added a block with the class ‘core/template’ (Mage_Core_Block_Template) inside of the group called ‘detailed_info’. That group is a built-in templates group for the product page tabs. You can use any name for your tab, just ensure that it’s unique (‘the_new_tab’ in our example). Then, we have assigned the template file for our tab where the tab’s content is placed – ‘atwix/newtab.phtml‘.
Finally, we have set the name for our tab using the standard method ‘setTitle()’, so the name is ‘The New Tab’.
On the last step, we need to check if our product view template contains the tabs output logic. Open the following file:
app/design/frontend/[theme_package]/[theme]/template/catalog/product/view.phtml
Inside of that file you should find something like this:
<div class="product-collateral toggle-content tabs">
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
<dl id="collateral-tabs" class="collateral-tabs">
<?php foreach ($detailedInfoGroup as $alias => $html):?>
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
<dd class="tab-container">
<div class="tab-content"><?php echo $html ?></div>
</dd>
<?php endforeach;?>
</dl>
<?php endif; ?>
</div>
If you’ve found it – great, you are lucky :) If not – try to add the code, that is shown above, before closing ‘</div>’. As usually, do not forget to clean the cache after you finish the changes.
We always appreciate your questions and suggestions in the comment below.