Magento – Linking on button and open custom tab

javascriptjquerymagento-1.9phtml

Need to open custom tab on product view, from link. Magento 1.9.2.4
Custom theme.
My tab, which is added just in one category by Custom Design

<reference name="product.info.tabs">
        <action method="addTab" translate="title" module="catalog" ><alias>contact</alias><title>Product Contact</title><block>productcontact/productcontact</block><template>productcontact/contact_form.phtml</template></action>
    </reference>

This is my button-link in view.phtml

> <?php if(($_product->getAttributeText('rent')) == "Yes"){?> <p><button
> type="button" title="<?php echo $this->__('Ask about rent') ?>" class="btn
> btn-default" onclick="location.href='#product_tabs_contact'"
> ><span><span><?php echo $this->__('Ask about rent') ?></span></span></button></p><?php

and my tabs.phtml

<?php 
$this->_product = Mage::registry('product');
?>
<div id="tabs" role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
        <?php $i=0;
        foreach ($this->getTabs() as $_index => $_tab): 
            if($this->getChildHtml($_tab['alias'])): 
                $i++;
        ?>
                <li role="presentation" class="<?php echo $i == 1?' active first':''?>"><a href="#product_tabs_<?php echo $_tab['alias'] ?>" aria-controls="product_tabs_<?php echo $_tab['alias'] ?>" role="tab" data-toggle="tab"><?php echo $_tab['title']?></a></li>
            <?php endif; ?>
        <?php endforeach; ?>
        <?php $productTabs = $this->_product->getProductTabs();
        foreach ($productTabs AS $tab) { ?>
            <li role="presentation"><a href="#product_tabs_<?php echo $tab->getId(); ?>" aria-controls="product_tabs_<?php echo $tab->getId(); ?>" role="tab" data-toggle="tab"><?php echo $tab->getTitle(); ?></a></li>
        <?php } ?>
    </ul>
    <div class="tab-content">
        <?php $i=0;
        foreach ($this->getTabs() as $_index => $_tab):  
            if($this->getChildHtml($_tab['alias'])): 
                $i++;
        ?>
                <div class="tab-pane fade<?php echo $i == 1?' active first in':''?>" id="product_tabs_<?php echo $_tab['alias'] ?>" role="tabpanel"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
            <?php endif; ?>
        <?php endforeach; ?>
        <?php $productTabs = $this->_product->getProductTabs();
        foreach ($productTabs AS $tab) { ?>
            <div class="tab-pane fade" id="product_tabs_<?php echo $tab->getId(); ?>" role="tabpanel"><?php echo $tab->getContent(); ?></div>
        <?php } ?>
    </div>
</div>

Can somebody have idea what I have to do?

TIA
Zydol

Best Answer

you can try this:

At the end of your tabs.phtml file:

<script type="text/javascript">
//Call it from some link: <a href="#my-tab" onclick="tabClick()">my tab</a>
function tabClick() {
    var hash = window.location.hash;
    jQuery(hash).children().click();
}

//On page load auto open the tab if the URL has at the end the tab id: domain.com/myproduct.html#my-tab
jQuery( document ).ready(function() {
    tabClick();
});
</script>

Look at the importance of the order of these function. If tabClick is not declared before "ready function", the script will not find the tabClick() function.

Related Topic