Feb
23
2015

Adding New Tabs to Products Within Magento

Starting off with Magento’s default tabs on product pages will leave you with “Delivery” and “Additional Information”.

Whilst these can be useful, it isn’t going to always include the exact information of which you need to display. Luckily, it isn’t too difficult to add / remove tabs from the list. Before we dive into the code, let’s try and understand it a little more.

Within the base themes location (app/design/frontend/base/default/) navigate to the layout directory and open “catalog.xml” (this being the layout file for the catalog module). Within this file you will find the following code:

 

<catalog_product_view translate="label">

     ...

   <reference name="content">
      <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

     ...

         <block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />

         <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>

         <block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Additional Information</value></action>
         </block>

     ...

      </block>
   </reference>

     ...

</catalog_product_view>

 

A few things to note here are the following:

1) A block “name” has to be unique to the page that it is used (In this case a catalog page) – It is worth noting that an “alias” has to be unique within a parent block

2) The “action” tag calls a public PHP method from within its particular module (for this example it is catalog)

3) The “Group” element defines an expandable fieldset. As a result it always has to be a child of another section

4) All of this is done within “<catalog_product_view>”. This is a call to the [Module_Frontname] _ [Controller] _ [Action] of which we will add our layout within.

5) A “Reference” is needed to declare where on the generated page that this block will be initiated.

So what is happening here? We have declared a block named “product.info” within the “content” section of the page. Within this we created a block named “product.info.additional” with the aim of showing a couple of information tabs. We have then called for two blocks to use the PHP method “addToParentGroup”, within the fieldset of “detailed_info” with the titles of “Description” and “Additional Information” respectively.

The most important part for the action method “addToParentGroup” is to ensure that you have the template file available to import into the tab. This can be seen within this section of code:

 

..
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
..

 

The “type” declares the “alias” of the module followed by the class name relative to the alias. Due to Magento’s functionality, the class name is the route to the file. So “product_view_description” translates to catalog/product/view/description

The template for the block is then declared within the “template” label. This is written with the literal route to the file (Magento always looks for a modified version within a new template first, so you do not put the absolute path to the file, only the relative path).

This block is therefore calling for anything within the “catalog/product/view/description.phtml” file to be added to into a fieldset of “detailed_info” with the title of “Description”.

 

Adding Our Own Tabs

 

Now we need to alter the base XML file by overriding its functionality with our own (you must never edit the base files of Magento). To do this create a file names “local.xml” within app/design/frontend/[your package]/[your theme]/layout.

Within this file enter the following code:

 

<?xml version="1.0" encoding="UTF-8"?>
<layout>

   <catalog_product_view>

      <reference name="product.info">

         <block type="catalog/product_view" name="product.delivery" as="delivery" template="catalog/product/view/delivery.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Delivery</value></action>
         </block>

         <block type="catalog/product_view" name="product.returns" as="returns" template="catalog/product/view/returns.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Returns</value></action>
         </block>
     
      </reference>

   </catalog_product_view>

</layout>

 

Here we are calling the same action as before i.e. “<catalog_product_view>”. Within this we reference the section we would like to add our blocks. This is name of the block declared in catalog.xml called “product.info”.

When we want to add our tabs we have to reference the same public PHP method as before called “addToParentGroup” with exactly the same group name of “detailed_info”. This will ensure they are all grouped together.

Finally we tell Magento that we are adding two files at the location of “catalog/product/view/delivery.phtml” and “catalog/product/view/returns.phtml”.

Now, if you go to the location of app/design/frontend/[your package]/[your_theme]/templates/catalog/product/view (You may have to create some directories if they are not already there) and create two files named “delivery.phtml” and “returns.phtml” we can  put ourselves on the finishing stretch!

Within these two files enter some dummy data – letting a cat walk over the keyboard is okay for that – and save the files. Make sure you have uploaded both the local.xml file and the new template files to your server (Or just save them both if you are working locally) and go to your product page. You should now see the two new tabs appearing next to the original ones!

Thank you for reading this tutorial. If you have any questions, feel free to write a comment below.