2

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:

enter image description here

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?

  • do you want to duplicate Description tab's content to New tab ? – Anil Suthar Jun 8 '16 at 9:28
  • yes I want to do it that way. – Ramya Jun 8 '16 at 9:54
  • I want to duplicate the entire tab ( create a tab similar to the above) with different content. – Ramya Jun 8 '16 at 10:00
  • This answer is already given below by Raphael – Anil Suthar Jun 8 '16 at 10:02
  • want to add whole new product-collateral block with tab(s) ? – Anil Suthar Jun 8 '16 at 10:09
2

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>
  • yes It worked.This is exactly what I want. Thank you so much @Anil Suthar. Do We need to change the name similar to detailed_info to do this? – Ramya Jun 8 '16 at 10:35
0

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.

  • I think you are giving me answer to add the fourth tab as additional tab to that already present three tabs. I want to display the fourth_tab in a seperate tab. – Ramya Jun 8 '16 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.