adding tabs to VM Product Page

[Jerome]

I would like to have tabs for review, description, spec, etc. on the product pages. Is this a simple solution to integrate in Vm 2.0+ or 2.0.8e? What will I need to do to get tabs on the product page?

[ivus]

Hi Jerome,

I'm going to assume you know a bit about PHP and jQuery, but basically you don't need any third party plugins as other topics have been suggesting. The solution is simple:

THE CODE (place in "/templates/YOUR_TEMPLATE/html/com_virtuemart/productdetails/default.php")

Code Select Expand


   
    <div id="tabContainer">
   
        <ul>
            <li><a class="active" href="#tab1">Details</a></li>
            <li><a href="#tab2">Reviews/Comments</a></li>
            <li><a href="#tab3">Related Products</a></li>
        </ul><!-- //Tab buttons -->
       
        <div class="tabDetails">
       
            <div id="tab1" class="tabContents">
            YOUR CONTENT CODE FOR DETAILS GOES HERE
            </div><!-- //tab1 -->
            <div id="tab2" class="tabContents">
            YOUR CONTENT CODE FOR REVIEWS/COMMENTS GOES HERE
            </div><!-- //tab2 -->
            <div id="tab3" class="tabContents">
            YOUR CONTENT CODE FOR RELATED PRODUCTS GOES HERE
            </div><!-- //tab3 -->
           
        </div><!-- //tab Details -->
       
    </div><!-- //Tab Container -->
<script type="text/javascript">
jQuery(function ($){

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

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

});
    </script>
   


THE CSS STYLE

Code Select Expand



div#tabContainer {
margin:30px 0 0 0;
padding:0;
position:relative;
}
div#tabContainer ul {
overflow:hidden;
height:35px;
position:absolute;
z-index:100;
}
div#tabContainer li {
float:left;
list-style:none;
margin-right:1px;
}
div#tabContainer li a {
background:#ddd;
color:#666;
cursor:pointer;
display:block;
padding:5px 9px;
text-decoration:none;
font-size:12px;
}
div#tabContainer li a:hover {
background:#eee;
}
div#tabContainer li a.active {
background:#fbfbfb;
color:#333;
}
.tabDetails {
margin:0;
padding:28px 0 0 0;
}
.tabContents {
padding:10px;
border-top:2px solid #ddd;
}



Now, it you're cluey enough to see the pattern you can create unlimited amounts of tabs... (obviously as much as your browser width will dictate). If not, here's a quickie piece of knowledge:

To create MORE tabs...

• Create more LIST ITEMS ('<li><a href="#tab4">WHAT EVER</a></li>')
• Match it to a corresponding div ('<div id="tab4" class="tabContents">WHAT EVER CONTENT</div><!-- //tab4 -->')
• Make sure you get the tab name correct for both ('#tab4')

Good luck.

[Jerome]

Thank you for the reply. I will try when I get home.

Sent from my PG86100 using Tapatalk 2

[Corrado]

Hi there, I worked on it and it seams all is fine.
Nicely done and easily to understand.

I set a tab to show details and one to show description.

Now I would like to create another tab to show the short description, I tryed several way but got no results.

How can I do that, I mean what code should insert here

<div id="tab1" class="tabContents">
               YOUR CONTENT CODE 
            </div>


to have the short description in the tab?

[bytelord]

Hello,

You could use the following:

Code Select Expand

<div id="tab1" class="tabContents">
<?php // Product Short Description
    if(!empty($this->product->product_s_desc)) { ?>
<p class="product_s_desc">
<?php echo shopFunctionsF::limitStringByWord($this->product->product_s_desc, 200, '...') ?>
</p>
<?php } //Product Short Description END?>
</div>


if you doesn't want to use the function limitStringByWord to limit the size of the content you could use the following

Code Select Expand

<div id="tab1" class="tabContents">
<?php // Product Short Description
    if(!empty($this->product->product_s_desc)) { ?>
<p class="product_s_desc">
<?php echo $this->product->product_s_desc; ?>
</p>
<?php } //Product Short Description END?>
</div>


Just an example, you should try to read the forum, specially the following posts:

Product fields: http://forum.virtuemart.net/index.php?topic=92756.0
Category Fields: http://forum.virtuemart.net/index.php?topic=97744.0
and
http://forum.virtuemart.net/index.php?topic=100696.0

Regards

[Corrado]

Thank you very much!

I will work on it, I was able to solve with a normal
  <?php  echo $this->product->product_s_desc; ?> 

But I have something else in mind for another zone in the website and definitely you gave me some idea.

;-)


Beside that any idea how to insert in the tabs another tab where the content (that is not the main description nor the short description) can be modified each product?

[bytelord]

Hi,

always better is to do it as

Code Select Expand

  if(!empty($this->product->product_s_desc))
     {
      echo $this->product->product_s_desc;
     } ?>

tabs inside tabs, not good idea i suppose, horizontal tabs with vertical menu is a better design, imho.

Regards

[DH]

I love this function, but where to put the CSS code inside? Or make a new CSS file?

[bytelord]

Hello,

Make a new property inside your vm css file. You can use firebug to examine your code and style.

http://forum.virtuemart.net/index.php?topic=102850.0

[edmundfrench]

ivus

Thanks you for supplying the code. I have implemented the code. But the e.preventDefault does not seem to be working. I presume this bit of code is to prevent the page jumping to the top on each click event? Is there something I have done wrong?  I am fairly new to Javascript so I have probably made an obvious mistake.

Here's my code:

   <div id="tabContainer">
   
        <ul>
            <li><a class="active" href="#tab1">Product Specifications</a></li>
            <li><a href="#tab2">Tab 2</a></li>
        </ul><!-- //Tab buttons -->
       
        <div class="tabDetails">
       
            <div id="tab1" class="tabContents">
               <?php echo $this->product->product_desc; ?>                
            </div><!-- //tab1 -->
            <div id="tab2" class="tabContents"> 
                <?php echo $this->product->product_desc; ?>     
            </div><!-- //tab2 -->
           
        </div><!-- //tab Details -->
       
    </div><!-- //Tab Container -->
   <script type="text/javascript">
      jQuery(function ($){
         
         $(".tabContents").hide();
         $(".tabContents:first").show();
         
         $("#tabContainer ul li a").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 also tried adding these lines of codes

   e.stopPropagation();
       e.stopImmediatePropagation();

but they didn't stop the page jumping to the top either.

thanks in advance

Ed

[major]

I there, im trying to use this tab system, i insert the code and is all good but where do i put de description text for the second tab???

First tab- product description from virtuemart product
Second tab - i wont to make another description with dimensions of the product and maybe a image, where to i put this text???
Third tab - maybe some additional info, but same problem where do i put the info???

http://www.mobiliariocomluz.pt/index.php/mobiliario-de-interior/sofas-e-cadeiras-sem-leds/natural-zebra_details.html

Thanks

[bytelord]

Hello,

As is see your tabs is working, what you need is to add a new custom field for your product with extra information you will need.

Regards

[major]

It seems its working, tanks for the tip bytelord.

Do you know how i make the title of the second tab, not appear in the content???

Can i make another custom field for the 3º tab?

[bytelord]

Hello,

As many custom fields as you want, you have to echo those custom fields inside your tab.
What do you mean?? "Do you know how i make the title of the second tab, not appear in the content???"

Regards

[major]

Sorry for my English

If you click on the Product dimension Tab, in the text it have Product Dimensions again in bold, i think that's the costume fiel title, but i have that in the tab so i wood like to remove it.