How to create a custom tab in product details page?

Question

In magento 1.9.2.4 Product details page, I want to keep a tab to switch between contents like below:

But already In details page there is default tab (I inherited rwd theme) Like this: In app/design/frontend/<package>/<theme>/template/catalog/product/view.phtml

coding for this tab was 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>

And in app/design/frontend/<package>/<theme>/layout/catalog.xml it was like this:

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"> 
     <action method="addToParentGroup"><group>detailed_info</group></action>
     <action method="setTitle" translate="value"><value>Description</value></action>
</block>

so In order to keep like this tab I added this code in phtml file:

<div class="details-tab">
<div class="product-collateral toggle-content tabs">
    <?php if ($miniDetailedInfoGroup = $this->getChildGroup('detail_info', 'getChildHtml')):?>
        <dl id="collateral-tabs" class="collateral-tabs">
            <?php foreach ($miniDetailedInfoGroup 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>
</div>

and added in xml file like this:

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"> 
     <action method="addToParentGroup"><group>detail_info</group></action>
     <action method="setTitle" translate="value"><value>Description</value></action>
</block>

But nothing displayed. Someone please help.

Answer 1

You can just add your new tab like this in your catalog.xml

<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
         .........
         other tabs

         <action method="addTab" translate="title" module="catalog"><alias>your_name</alias><title>Your Tab Name</title><block>catalog/product_view_description</block><template>catalog/product/view/your_file.phtml</template></action>
         ................
         other stuff
</block>

if you wish to add from your local.xml then have this instead:

<reference name="product.info.tabs">
     <action method="addTab" translate="title" module="catalog"><alias>your_name</alias><title>Your Tab Name</title><block>catalog/product_view_description</block><template>catalog/product/view/your_file.phtml</template></action>
</reference>

If you look at <block> node catalog/product_view_description, means you are calling mage/catalog/product/view/description.php block. If you want to call your own you can change this.

And obviously your phtml file is your_file.phtml with your own content.

Answer 2

You are very close to the solution in your code.

For this you need to follow the following steps.

either create a local.xml file in layout directory and place a following code into it

<?xml version="1.0" encoding="UTF-8" ?>
<layout>
    <catalog_product_view>
        <reference name="product.info">
            <block type="catalog/product_view_description" name="module.data" as="test" template="catalog/product/view/description.phtml">
                <action method="addToParentGroup"><group>detailed_info</group></action>
                <action method="setTitle" translate="value"><value>Description</value></action>
            </block>
        </reference>
    </catalog_product_view>
</layout>

OR

1) Create your custom module.

2) Define a block which extends Mage_Catalog_Block_Product_Abstract.

3) either create a layout file for your module or use local.xml. if local.xml not exist then you have to create it in layout directory and place the following code in layout file.Please make changes in as per your class group in config file. in my case it is comp_faq

<?xml version="1.0" encoding="UTF-8" ?>
<layout>
    <catalog_product_view>
        <reference name="product.info">
            <block type="comp_faq/list" name="comp.faq" as="compfaq" template="catalog/product/view/description.phtml">
                <action method="addToParentGroup"><group>detailed_info</group></action>
                <action method="setTitle" translate="value"><value>Descriptionaaaa</value></action>
            </block>
        </reference>
    </catalog_product_view>
</layout>

4) code for block file .

class Comp_Faq_Block_List extends Mage_Catalog_Block_Product_Abstract
{

}

hope this will help you.

Answer 3

The answer to this question worked for us:

Adding Custom Tabs in Product Detail Page

Just please read the comments first and edit local.xml file instead of catalog.XML like suggested there. It works, but its bad practice.