Magento

I. Add Custom Tabs on Product detail

Step1 : Create a new Attribute

Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named customtab

Set Catalog Input Type for Store Owner as Text Field. You can leave the remaining fields as Default.

Next, in the Frontend Properties, determine settings about how the tab work on the front-end. Kindly setEnable WYSIWYG as “Yes”.

Navigate to the Manage Label / Options tab, enter any title e.g. “Size Chart” for admin and default store view.

Save the Attribute. Now your new attribute is all set!

Step 2 : Assign the Attribute

Navigate to Catalog >> Attributes >> Manage Attributes Sets.

1. Choose Attribute Set.

2. Drop the “customtab” from Unassigned Attributes into Groups.

3. Save it.

Step 3: Create content

We will make a static lock for content. Navigate to CMS >> Static Block. Add a new block the the following content:

1. Block Title : Size Chart

2. Identifier : position-13

3. Status : Enabled

4. Content : Input what you want here

Step 4: Add Product tab contentt

Navigate to Catalog >> Manage Products. You now can see your new textarea, in this case we call it “Size chart”.

1. Fill in the content

2. Save content

3. Refresh the cache

I. Add Custom Tabs on Product detail

Step1 : Create a new Attribute

Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named customtab

Set Catalog Input Type for Store Owner as Text Field. You can leave the remaining fields as Default.

Next, in the Frontend Properties, determine settings about how the tab work on the front-end. Kindly setEnable WYSIWYG as “Yes”.

Navigate to the Manage Label / Options tab, enter any title e.g. “Size Chart” for admin and default store view.

Save the Attribute. Now your new attribute is all set!

Step 2 : Assign the Attribute

Navigate to Catalog >> Attributes >> Manage Attributes Sets.

1. Choose Attribute Set.

2. Drop the “customtab” from Unassigned Attributes into Groups.

3. Save it.

Step 3: Create content

We will make a static lock for content. Navigate to CMS >> Static Block. Add a new block the the following content:

1. Block Title : Size Chart

2. Identifier : position-13

3. Status : Enabled

4. Content : Input what you want here

Step 4: Add Product tab contentt

Navigate to Catalog >> Manage Products. You now can see your new textarea, in this case we call it “Size chart”.

1. Fill in the content

2. Save content

3. Refresh the cache

Step 5. Update Product page view

To see our tab on the front-end, let’s add it to your view.phtml file. If it’s your first time adding tabs, copy the file at \app\design\frontend\base\default\template\catalog\product\view.phtml. Paste this into the theme’s folder. Now your view.phtml will have the location like that:\app\design\frontend\default\yourtheme\template\catalog\product\view.phtml.

In view.phtml, find the following code line :

  1. <divid=“ja-tab-products”class=“product-collateral”>

Add this section before the line:

  1. <?php
  2. //add the customtab to the product tab
  3. $attribute = $_product->getResource()->getAttribute(‘customtab’);
  4. if(is_object($attribute)){
  5.   $identifier = $_product->getData(“customtab”);
  6.   }
  7. $blockcustom =  Mage::app()->getLayout()->createBlock(‘cms/block’)->setBlockId($identifier);
  8. $blockcustommodel =Mage::getModel(‘cms/block’)->load($identifier);
  9. $customtitle = $blockcustommodel->getTitle();
  10. $customtab = $blockcustom->toHtml();
  11. ?>

Next, find this follows:

  1. <?php if($review_form = $this->getChildHtml(‘review_form’)):?>
  2. <li><ahref=“#ja-tabitem-reviewform”><?php echo $this->__(‘Write Your Own Review’)?></a></li>
  3. <?php endif;?>

Under this block code, insert as below:

  1. <?php if($customtab):?>
  2. <li><ahref=“#ja-tabitem-custom”><?php echo $this->__($customtitle)?></a></li>
  3. <?php endif;?>

Then, find the follows:

  1. <?php if($customtab):?><?php if($review_form):?>
  2. <divid=“ja-tabitem-reviewform”>
  3. <?php echo $review_form;?>
  4. </div>
  5. <?php endif/;?>

Under this, insert:

  1. <?php if($customtab):?>                        
  2. <divid=“ja-tabitem-custom”>                        
  3. <?php echo $customtab;?>                      
  4. </div>                      
  5. <?php endif;?>

Save the file and you are done now! Enter your front-end to see what we’ve got. I’m pretty sure it will be the same as our demo.

Following strictly this tutorial should help you add Custom Tabs for your product detail page properly. However, just in case you need any further assistant, raise a ticket HERE (Technical – JMTC Option). We’d love to help!

Step 5. Update Product page view

To see our tab on the front-end, let’s add it to your view.phtml file. If it’s your first time adding tabs, copy the file at \app\design\frontend\base\default\template\catalog\product\view.phtml. Paste this into the theme’s folder. Now your view.phtml will have the location like that:\app\design\frontend\default\yourtheme\template\catalog\product\view.phtml.

In view.phtml, find the following code line :

  1. <divid=“ja-tab-products”class=“product-collateral”>

Add this section before the line:

  1. <?php
  2. //add the customtab to the product tab
  3. $attribute = $_product->getResource()->getAttribute(‘customtab’);
  4. if(is_object($attribute)){
  5.   $identifier = $_product->getData(“customtab”);
  6.   }
  7. $blockcustom =  Mage::app()->getLayout()->createBlock(‘cms/block’)->setBlockId($identifier);
  8. $blockcustommodel =Mage::getModel(‘cms/block’)->load($identifier);
  9. $customtitle = $blockcustommodel->getTitle();
  10. $customtab = $blockcustom->toHtml();
  11. ?>

Next, find this follows:

  1. <?php if($review_form = $this->getChildHtml(‘review_form’)):?>
  2. <li><ahref=“#ja-tabitem-reviewform”><?php echo $this->__(‘Write Your Own Review’)?></a></li>
  3. <?php endif;?>

Under this block code, insert as below:

  1. <?php if($customtab):?>
  2. <li><ahref=“#ja-tabitem-custom”><?php echo $this->__($customtitle)?></a></li>
  3. <?php endif;?>

Then, find the follows:

  1. <?php if($customtab):?><?php if($review_form):?>
  2. <divid=“ja-tabitem-reviewform”>
  3. <?php echo $review_form;?>
  4. </div>
  5. <?php endif/;?>

Under this, insert:

  1. <?php if($customtab):?>                        
  2. <divid=“ja-tabitem-custom”>                        
  3. <?php echo $customtab;?>                      
  4. </div>                      
  5. <?php endif;?>

Save the file and you are done now! Enter your front-end to see what we’ve got. I’m pretty sure it will be the same as our demo.

Following strictly this tutorial should help you add Custom Tabs for your product detail page properly. However, just in case you need any further assistant, raise a ticket HERE (Technical – JMTC Option). We’d love to help!

Leave a comment