Creating product page tabs in magento - magento

Question

Is there anyone who can help me?
I am making a website using magento, but I am really struggeling on creating custom product tabs.
I tried using a couple of extensions such as Easy tabs and couldn't get it working.
I also tried following this http://www.joomlart.com/documentation/magento-faqs/magento-add-custom-tabs-to-product tutorial but didn't have any luck because some of the code was missing in my view.phtml.
Is there anybody who can give me a detailed explanation on this topic?

Answer 1

That is a complicated way to this.
First you need to create or update your local.xml file IF you do not have a local.xml file you can create one in
app->frontend->[Package Name]->[Theme Name]->layout->local.xml
Once this is created you can copy exactly what I have in this post into that file for a start of how to use one.
DO ALL UPDATES THROUGH A LOCAL.XML file not through page.xml catalog.xml, checkout.xml etc!! This will make upgrades significantly easier later down the road. Additionally, you will be able to quickly see all changes you have made to your site in one file.
Within your local.xml file
I commented what you have to do within the code / hopefully this makes it easier to understand what you are doing.
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Product Detail Page -->
<catalog_product_view translate="label">
<!-- Add Tabs -->
<reference name="product.info">
<!-- Both files that need to be created their contents are referenced below -->
<!-- Create a file named attributes.phtml in /YourPackage/Yourtheme/template/catalog/product/view/tabs.phtml -->
<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
<!-- Create a file named attributes.phtml in /YourPackage/Yourtheme/template/catalog/product/view/attributes.phtml -->
<action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Specifications</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
</block>
</reference>
</catalog_product_view>
</layout>
<!-- End of Local.xml -->
<!-- Contents of tabs.phtml -->
<ul class="product-tabs">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><?php echo $_tab['title']?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
<?php endif; ?>
<?php endforeach; ?>
<script type="text/javascript">
//<![CDATA[
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
},
remoteTabs: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
}
var productTabs = new Varien.Tabs('.product-tabs');
//]]>
</script>
<!-- End of tabs.phtml -->
<!-- Contents of attributes.phtml / This will list of all attributes -->
<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct()
?>
<?php if($_additional = $this->getAdditionalData()): ?>
<h2><?php echo $this->__('Additional Information') ?></h2>
<table class="data-table" id="product-attribute-specs-table">
<col width="25%" />
<col />
<tbody>
<?php foreach ($_additional as $_data): ?>
<tr>
<th class="label"><?php echo $this->escapeHtml($this->__($_data['label'])) ?></th>
<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script type="text/javascript">decorateTable('product-attribute-specs-table')</script>
<?php endif;?>
<!-- End to attributes.phtml -->
<!-- alternative contents of attributes.phtml use this to only display one specific attribute -->
<!-- Replace InstructorBio with your attribute value -->
<!-- If your attribute code is product_tab then getInstructorBio would become getProductTab instructor_bio would be product_tab -->
<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct()
?>
<?php if ($_additional = $_product->getInstructorBio()): ?>
<?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getInstructorBio(), 'instructor_bio') ?>
<?php endif; ?>
Now for the final step: you have to call your tabs where you want them to display Because I used the "as" name as info_tabs this is the name you reference when you call in your view.phtml file
Insert this code inside your view.phtml and you will now have tabs
<?php echo $this->getChildHtml('info_tabs') ?>