Question

I am trying to link to a specific tab in Magento Enterprise. It seems that all of the answers I’ve found don’t apply well to their method. I just need a link to the page to also pull up a specific tab. This is the code they use:

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');
    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();
        }
    }
}
});

Anyone have an idea?

Answer 1

I would consider modifying how the class starts up.

initialize: function (container) {
    this.container = $(container);
    this.container.addClassName('tab-list');
    this.tabs = this.container.select('dt.tab');
// change starts here //
    var hashTab = $(window.location.hash.slice(1));
    this.activeTab = ( this.tabs.include(hashTab) ? hashTab : this.tabs.first());
// change ends here //
    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();
}

Here, I have only changed how the initial tab is chosen. It checks for an URL fragment which is commonly known as a hash, if that identifies one of the tabs it is preselected. As a bonus the browser will also scroll to that element if possible.

Then you only need to append the tab’s ID to the URL. For example you might generate the URL by;

$productUrl = Mage::getUrl('catalog/product/view', array(
    'id' => $productId,
    '_fragment' => 'tab_id',
));