How to add customized tab in product detail page in magento

Topics focus on Web Developments, Programming, Database, Digital Marketing Tutorials, Code Snippets, SEO, Social Media Marketing and Inspirational articles.

How to add customized tab in product detail page in magento

How to add customized tab in product detail page in magento

Here, We will explain How to add customized tab in product detail page in magento?

The code for creating customized tabs in product detail page. You can put this code in view.phtml file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="product-tabs-container clearfix">    
	<ul class="product-tabs">    	    
		<li id="product_tabs_description_tabbed" class="first"><a href="#">Overview</a></li>
		<li id="product_tabs_specification_tabbed"><a href="#">Specification</a></li>
		<li id="product_tabs_delivery_tabbed"><a href="#">Delivery</a></li>
		<li id="product_tabs_warranty_tabbed"><a href="#">Warranty</a></li>
		<li id="product_tabs_review_tabbed" class="last"><a href="#">Reviews</a></li>
	</ul>
	<h2 id="product_acc_description_tabbed" class="tab-heading"><a href="#"><?php echo "Overview";?></a></h2>
	<div class="product-tabs-content tabs-content" id="product_tabs_description_tabbed_contents"><?php echo $_product->getDescription(); ?></div>        
	<h2 id="product_acc_specification_tabbed" class="tab-heading"><a href="#"><?php echo "Specification";?></a></h2>
	<div class="product-tabs-content tabs-content" id="product_tabs_specification_tabbed_contents"><?php echo $_product->getSpecification(); ?></div>
	<h2 id="product_acc_delivery_tabbed" class="tab-heading"><a href="#"><?php echo "Delivery";?></a></h2>
	<div class="product-tabs-content tabs-content" id="product_tabs_delivery_tabbed_contents"><?php echo $_product->getDelivery(); ?></div>
	<h2 id="product_acc_warranty_tabbed" class="tab-heading"><a href="#"><?php echo "Warranty";?></a></h2>
	<div class="product-tabs-content tabs-content" id="product_tabs_warranty_tabbed_contents"><?php echo $_product->getWarranty(); ?></div>
	<h2 id="product_acc_reviews_tabbed" class="tab-heading"><a href="#"><?php echo "Reviews";?></a></h2>
	<div class="product-tabs-content tabs-content" id="product_tabs_review_tabbed_contents"><?php echo $_product->getReviews(); ?></div>        
</div>
 
// Put this script at bottom of the page
<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));
	this.showContent($$(selector+' a')[0]);
  },
 
  initTab: function(el) {
	  el.href = 'javascript:void(0)';
	  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();
	  }
	});
  }
}
new Varien.Tabs('.product-tabs');
//]]>
</script>

Add comment


 

Pin It on Pinterest

Share This