New tab in product description

Hi all.

I'am design a website of air conditioners. In product description i would like put aside by the description and other product specifications in two tabs, something similar to "yourshop" template (attach an image).

I don't know if it's possible modifying some file or download a plugin.

My website: http://s412856873.mialojamiento.es/inde ... nke-detail

I hope you can understand me, my english is not good.

Thank you.

Hi,
you can modify some file. In html/com_virtuemart/productdetails/default.php you have to have this structure:

Code: Select all

 <ul id="gkProductTabs">
    <li class="gkProductTabActive"><span></span></li>
    <li><span></span></li>
    </ul>


This code is for tabs you will click. Code for containers should look like this:

Code: Select all

<div id="gkProductTab1" class="gkProductTab">
</div>
<div id="gkProductTab2" class="gkProductTab gkUnvisible">
</div>


Then you need to add to js/gk.scripts.js

Code: Select all

if(document.id('gkProductTabs')) {
      
      document.id('gkComponent').addEvent('click', function(e){
         
         var evt = new Event(e).target;
         
           if((window.ie && evt.nodeName == 'SPAN') || (!window.ie && evt.get('tag') == 'span')) {
                if($(evt).getParent().getParent().getProperty('id') == 'gkProductTabs') {
                    $$('.gkProductTab').addClass('gkUnvisible');
                    $$('#gkProductTabs li').setProperty('class', '');
                    var num = 0;
                    $$('#gkProductTabs li').each(function(el, i){
                        if(el == evt.getParent()){ num = i; }
                    });
                    $$('.gkProductTab')[num].removeClass('gkUnvisible');
                  $$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
                }
            } else if((window.ie && evt.nodeName == 'LI') || (!window.ie && evt.get('tag') == 'li')) {
                if($(evt).getParent().getProperty('id') == 'gkProductTabs') {
                    $$('.gkProductTab').addClass('gkUnvisible');
                    $$('#gkProductTabs li').setProperty('class', '');
                    var num = 0;
                    $$('#gkProductTabs li').each(function(el, i){
                        if(el == evt.getParent()){ num = i; }
                    });
                    $$('.gkProductTab')[num].removeClass('gkUnvisible');
                  $$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
                }
            }
      });
   }

inside window.addEvent function. Last thing you need to copy are css styles for classes. You will find them in css yourshop files.

It works!

I need to perfect some styles but works perfectly.

I'm very grateful Konrad.

Hi Konrad,

i'm interesting to do the same with the bikesport theme. Now i'm using de DJ-VMPagebreak plugins but a have conflict with the widgetkit slideshow of yootheme, and i'm looking for an alternative.

I'm looking the default.php file that you say in the post and i don't understant what exactly i have to do. The code that show the desciption is this. Can you explain me more exactly what i have to do?

Thank you.

Code: Select all

      <?php // Product Description
   if (!empty($this->product->product_desc)) { ?>
      <div class="product-description">
            <?php /** @todo Test if content plugins modify the product description */ ?>
            <h4 class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></h4>
            <?php echo $this->product->product_desc; ?> </div>
      <?php } // Product Description END

You have to add on new li element with the same class to ul lists. It will add new tab. And then you have to add one more container under second one. And putt your data inside this container.