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>