News:

Looking for documentation? Take a look on our wiki

Main Menu

adding tabs to VM Product Page

Started by Jerome, July 22, 2012, 18:09:25 PM

Previous topic - Next topic

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")


   
    <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



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

#2
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

#4
Hello,

You could use the following:

<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_desc200'...'?>
</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

<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
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

Corrado

#5
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

#6
Hi,

always better is to do it as

  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
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

DH

I love this function, but where to put the CSS code inside? Or make a new CSS file?
---------------------------------------
PHP v5.3.1          |  Apache v2.2.41
MySQL v5.1.41   |  XAMPP 1.7.3
phpMyAdmin v3.2.4
Windows 7 SP1 Professional
---------------------------------------

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
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

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

#10
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
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

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
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

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.