VirtueMart Forum

Hello there

I'm desperate because I can' t make any short of jQuery tabs work with Virtuemart ( 3.0.9 - 3.0.12) product details view. It seems that ajax calls break the jQuery functions.
1)The easiest way, and same time the most highly rated tabs extension called NoNumber Tabs, doesn' t work. If you have 2 tabs, one for "Product Details" and one for "Rating", the result is that you have  first to click "Rating" tab and then refresh the page in order for the rating stars to work.
2) Bootstrap Nav Tabs won't work either.
3) The solution below will work partially. That means that it works smoothly until I click a Custom Multivariant, and then the second tab contents reveals with first tab contents, as long as I click a tab again. That is an Ajax call effect I suppose.

HTML

<div id="tabContainer">
        <ul class="myTabs">
            <li class="myTabs"><a class="active" href="#tab1">Details</a></li>
            <li class="myTabs" ><a href="#tab2">Ratings</a></li>
        </ul>
        <div class="tabDetails">
            <div id="tab1" class="tabContents"></div>
            <div id="tab2" class="tabContents"></div>
       </div>
</div>


SCRIPT
<script type="text/javascript">
jQuery(document).ready(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").live('click', function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});
    </script>

I know that you claim that this is a jQuery subject, but I think that Virtuemart could be more user friendly, concerning such a popular tool as TABS (NoNumber Tabs must be compatible in future)!!! Please give me a solution, even a paid extension that works properly with virtuemart.

Thank you for your time 

why not use the built in tabs?

look in shopfunctionsF

shopFunctionsF::buildTabs ( $this, $tabarray);

then look in for examples of how its done

views/user/edit.php

one way to solve it, but the real problem is that he does not use the provided js api, which ensures that snippets like this are reloaded after the ajax call http://docs.virtuemart.net/tutorials/development/196-the-vm-javascript-handler.html

Why are you writing your own javascript?

VM comes with "components/com_virtuemart/assets/js/jquery-ui.min.js"

Which contains jquery tabs

So in your product page default template :


$qproduct = "
jQuery(document).ready(function() {
jQuery('#q-tabs').tabs();
});

vmJsApi::addJScript('q.product',$qproduct);



The q bits are what I use to differentiate some of my own stuff - rename as required


Then set your classes up.

Thanks for your propositions. I'll give them a shot.

Guys you rock!!!  ;D  After combining your wisdom I' ve become a little bit wiser.