Magento Enterprise Tabs - How to select specific tab?

Posted by Damodar Bashyal on October 06, 2012

 

This is how tab config looks in - catalog.xml

<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>Product Details</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="addToParentGroup"><group>detailed_info</group></action>
	<action method="setTitle" translate="value"><value>Additional Information</value></action>
</block>
<block type="cms/block" name="payment_options_tab" as="payment_options_tab" template="catalog/product/view/custom_tab_content.phtml">
	<action method="setBlockId"><block_id>payment_options_tab</block_id></action> 
	<action method="addToParentGroup"><group>detailed_info</group></action> 
	<action method="setTitle" translate="value"><value>Payment Options</value></action> 
</block> 
<block type="cms/block" name="shipping_calculator_tab" as="shipping_calculator_tab" template="catalog/product/view/custom_tab_content.phtml"> 
	<action method="setBlockId"><block_id>shipping_calculator_tab</block_id></action> 
	<action method="addToParentGroup"><group>detailed_info</group></action> 
	<action method="setTitle" translate="value"><value>Shipping Calculator</value></action> 
</block>

content of - custom_tab_content.phtml

<div class="std"> 
	<?php $attribute = $this->getData('attribute'); ?> 
	<?php $data = $this->getProduct()->getData($attribute); ?> 
	<h2><?php echo $this->getTitle() ?></h2> 
	<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $data, $attribute) ?> 
</div>

catalog/product/view.phtml

... 
<dl id="collateral-tabs" class="collateral-tabs"> 
	<?php foreach ($detailedInfoGroup as $alias => $html):?> 
		<dt class="tab <?php echo $alias; ?>" id="<?php echo $alias; ?>"><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> 
...

Copied skin\frontend\enterprise\default\js\scripts.js to skin\frontend\enterprise\ddu\js\scripts.js

and updated with few hacks:

Enterprise.Tabs = Class.create(); 
 Object.extend(Enterprise.Tabs.prototype, { 
     initialize: function (container) { 
         this.container = $(container); 
         this.container.addClassName('tab-list'); 
         this.tabs = this.container.select('dt.tab'); 
   
         /* 
          * change starts here @damu 
          */ 
         var hashTab = $(window.location.hash.slice(1)); 
         this.activeTab = ( this.tabs.include(hashTab) ? hashTab : this.tabs.first()); 
         // change ends here // 
         // this.activeTab = this.tabs.first(); 
   
         this.tabs.first().addClassName('first'); 
         this.tabs.last().addClassName('last'); 
         this.onTabClick = this.handleTabClick.bindAsEventListener(this); 
         for (var i = 0, l = this.tabs.length; i < l; i ++) { 
             this.tabs[i].observe('click', this.onTabClick); 
         } 
         this.select(); 
     }, 
     handleTabClick: function (evt) { 
         this.activeTab = Event.findElement(evt, 'dt'); 
         this.select(); 
     }, 
     select: function () { 
         for (var i = 0, l = this.tabs.length; i < l; i ++) { 
             if (this.tabs[i] == this.activeTab) { 
                 this.tabs[i].addClassName('active'); 
                 this.tabs[i].style.zIndex = this.tabs.length + 2; 
                 /*this.tabs[i].next('dd').show();*/ 
                 new Effect.Appear (this.tabs[i].next('dd'), { duration:0.5 }); 
                 this.tabs[i].parentNode.style.height=this.tabs[i].next('dd').getHeight() + 15 + 'px'; 
             } else { 
                 this.tabs[i].removeClassName('active'); 
                 this.tabs[i].style.zIndex = this.tabs.length + 1 - i; 
                 this.tabs[i].next('dd').hide(); 
             } 
         } 
     }, 
     // this is new method @damu 
     // helps to activate tab from other links 
     selectTab: function (element) { 
         this.activeTab = element; 
         this.select(); 
     } 
 });

Now i can pass tab id as a fragment to activate the tab "on page load" like this:

http://localhost.com/product-1.html#description

http://localhost.com/product-1.html#payment_options_tab

http://localhost.com/product-1.html#shipping_calculator_tab

To activate tab from external trigger:

<script type="text/javascript"> 
   var Tabs = new Enterprise.Tabs('collateral-tabs'); 
   Tabs.selectTab($('shipping_calculator_tab')); 
</script> 
 
not published on website


QR Code: Magento Enterprise Tabs - How to select specific tab?