adding tabs to VM Product Page

[bytelord]

Hello,

You could edit your PHP file or edit your css creating an override for the custom field titles.

Code Select Expand

.product-fields-title {
display:none;
}

this will work for all custom field titles, or you could specify better the tab title

Code Select Expand

.tabDetails .product-fields-title {
display:none;
}


Use firebug to examine your site code and css styling: http://forum.virtuemart.net/index.php?topic=102850.0

-----

Also you could make an override for the file joomla_folder\components\com_virtuemart\views\productdetails\tmpl\default_customfields.php
just copy that file to create a template override under joomla_folder\templates\your_joomla_Template\html\com_virtuemart\productdetails\default_customfields.php

and change the following line as you wish ... you could comment that code out.

Code Select Expand

<span class="product-fields-title" ><?php //echo JText::_($field->custom_title); ?></span>



Some more information regarding template system and template overrides:
Template overrides: http://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards

[major]

Is there any way to only show a Tab if the product have information on that costume field???

[bytelord]

Hello,

Use some PHP ... if custom field not empty {
begin tab code
.
.
.
end tab code
}

[major]

Any idea where i can get that kind of code??

I don't know PHP, just some cut and past, by attempts.

I have to put that code in this area before each <li>

<ul>
            <li><a class="active" href="#tab1">Descrição do Produto</a></li>
            <li><a href="#tab2">Dimensões do Produto</a></li>
            <li><a href="#tab3">Informação Adicional</a></li>
        </ul><!-- //Tab buttons -->

[bytelord]

Hello,

You could create a new position for your custom field (under custom field configuration - load position). For example lets say 'posDetails'
So you php code will be like the following ...

Code Select Expand

<ul>
<?php if (!empty($this->product->customfieldsSorted['posDetails'])) { ?>
       
            <li><a class="active" href="#tab1">Descrição do Produto</a></li>     
<?php } ?>
     <li><a href="#tab2">Dimensões do Produto</a></li>
     <li><a href="#tab3">Informação Adicional</a></li>
    </ul><!-- //Tab buttons -->

after loading the content of the tab

Code Select Expand

<?php if (!empty($this->product->customfieldsSorted['posDetails'])) {
        $this->position='posDetails'; 
        echo $this->loadTemplate('customfields'); 
} ?>

Regards

[major]

Thanks bytelord that worked just fine.

[kaHEN]

Hey guys,

This solution worked perfectly however there is a minor issue on this jquery code as when you clicked to one of the tabs page just jumps to the top of the page. It might be annoying for your visitors so is there a way to prevent going top of the page when you clicked to any of the tabs?

Thanks in advance.

[bytelord]

Any live url to check on that? may be conflicts with other jquery plugin or joomla template jquery factionality.

[bytelord]

Hello,

Working great in IE9/10, Chrome and Firefox i tested. When you mean jumps to the top to mean when clicking out of ask-a-question tab. This is normal ... because the size of the content of you page becomes smaller
Is web pages works ... you will increase it when you will place some nice footer or any other modules

Regards

[kaHEN]

Hey,

Yes I totally wasnt aware of that. I just increased the height of my page and it works well.

Thanks for the help.

[xdoktor]

Thanks @ivus for this code and all other posters..works great! 

[liquid.ideas]

the js on mine is not hiding the other tabs content, now it is all displayed on one list, I have to use jquery easy for other elements on the page, do you think this is stripping it out?

[liquid.ideas]

nothing but nothing I try gets the script to run, any clues guys?

[Maxim Pishnyak]

Link?

And are sure that this tabs method is the only available option for you? I'm pretty sure that I saw more then one tabbing technique.

[liquid.ideas]

Hi Maxim, the site is locked as per request by client. This so far as I can see is the only tabs method that is done within the productdetails php file itself, there are modules and extensions that enable you to add tabs into the product descriptions, but that is not ideas as every product you would have to go and put in the custom code for example: reviews where with this method you can just put echo $this->loadTemplate('reviews'); into a tab and voila its on every page!

Just find it odd though, firebug not giving an error regarding the script nor is the built in firefox console, really really want to get this running!