how to add tab content in seperate new tab in details page?

Question

On my product details page I have three tabs, with the help of the following code:

 <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):?>
            <?php  
                    if(trim($html)=="") continue;           
            ?>
                <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>

The tab contents are like:

Now I want to create a new and separate product-collateral tab near the above mentioned tabs.

When I use the below line in catalog.xml it is adding the tab content to the same tab.

<action method="addToParentGroup"><group>detailed_info</group></action>

I want to create a separate tab like the above one, not add to the existing one.

How can this be done?

Answer 1

You have to create new Group for this. Add this to <catalog_product_view> handle.

<block type="catalog/product_view_description" name="product.description.sec" as="description_sec" template="catalog/product/view/description.phtml">
    <action method="addToParentGroup"><group>detailed_info_sec</group></action>
    <action method="setTitle" translate="value"><value>Description</value></action>
</block>
<block type="catalog/product_view_attributes" name="product.attributes.sec" as="additional_sec" template="catalog/product/view/attributes.phtml">
    <action method="addToParentGroup"><group>detailed_info_sec</group></action>
    <action method="setTitle" translate="value"><value>Additional Information</value></action>
</block>

Note, I have created a new group, named , detailed_info_sec, with two tabs, Description and Additional Information, you can add OR edit them as per your requirement.

To show this to frontend, add this block of code, to view.phtml

<div class="product-collateral toggle-content tabs">
    <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info_sec', 'getChildHtml')):?>
        <dl id="collateral-tabs-sec" 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>

Answer 2

So you need to add the following code to app/design/frontend/<your_package>/<your_theme>/layout/local.xml :

<catalog_product_view>
    <reference name="product.info">
        <block type="core/template" name="product.tab.fourth" as="fourth_tab" template="path/to/your/template.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Fourth Tab</value></action>
        </block>
    </reference>
</catalog_product_view>

You will need to create the template to display the content: app/design/frontend/<your_package>/<your_theme>/path/to/your/template.phtml

And also replace the value under the setTitle tag with the name you want to give to your tab.