Author Topic: adding tabs to VM Product Page  (Read 32272 times)

bytelord

  • Nikos
  • Global Moderator
  • Full Member
  • *
  • Posts: 2369
Re: adding tabs to VM Product Page
« Reply #15 on: November 19, 2012, 21:07:01 pm »
Hello,

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

Code: [Select]
.product-fields-title {
display:none;
}

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

Code: [Select]
.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]
<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
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

  • Beginner
  • *
  • Posts: 26
Re: adding tabs to VM Product Page
« Reply #16 on: November 20, 2012, 15:25:20 pm »
Is there any way to only show a Tab if the product have information on that costume field???

bytelord

  • Nikos
  • Global Moderator
  • Full Member
  • *
  • Posts: 2369
Re: adding tabs to VM Product Page
« Reply #17 on: November 20, 2012, 15:47:58 pm »
Hello,

Use some PHP ... if custom field not empty {
begin tab code
.
.
.
end tab code
}
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

  • Beginner
  • *
  • Posts: 26
Re: adding tabs to VM Product Page
« Reply #18 on: November 21, 2012, 00:13:13 am »
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

  • Nikos
  • Global Moderator
  • Full Member
  • *
  • Posts: 2369
Re: adding tabs to VM Product Page
« Reply #19 on: November 21, 2012, 05:51:30 am »
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]
<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]
<?php if (!empty($this->product->customfieldsSorted['posDetails'])) {
        
$this->position='posDetails'
        echo 
$this->loadTemplate('customfields'); 
?>

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

  • Beginner
  • *
  • Posts: 26
Re: adding tabs to VM Product Page
« Reply #20 on: November 21, 2012, 12:30:28 pm »
Thanks bytelord that worked just fine.


kaHEN

  • Beginner
  • *
  • Posts: 4
Re: adding tabs to VM Product Page
« Reply #21 on: November 28, 2012, 01:05:11 am »
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

  • Nikos
  • Global Moderator
  • Full Member
  • *
  • Posts: 2369
Re: adding tabs to VM Product Page
« Reply #22 on: November 28, 2012, 01:14:05 am »
Any live url to check on that? may be conflicts with other jquery plugin or joomla template jquery factionality.
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!

bytelord

  • Nikos
  • Global Moderator
  • Full Member
  • *
  • Posts: 2369
Re: adding tabs to VM Product Page
« Reply #23 on: November 28, 2012, 01:42:16 am »
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
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!

kaHEN

  • Beginner
  • *
  • Posts: 4
Re: adding tabs to VM Product Page
« Reply #24 on: November 28, 2012, 01:55:15 am »
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

  • Jr. Member
  • **
  • Posts: 71
Re: adding tabs to VM Product Page
« Reply #25 on: January 06, 2013, 20:06:45 pm »
Thanks @ivus for this code and all other posters..works great!  :D

liquid.ideas

  • Jr. Member
  • **
  • Posts: 90
Re: adding tabs to VM Product Page
« Reply #26 on: August 17, 2013, 22:23:32 pm »
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

  • Jr. Member
  • **
  • Posts: 90
Re: adding tabs to VM Product Page
« Reply #27 on: August 17, 2013, 23:03:18 pm »
nothing but nothing I try gets the script to run, any clues guys?

Maxim Pishnyak

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 2657
Re: adding tabs to VM Product Page
« Reply #28 on: August 18, 2013, 11:50:24 am »
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

  • Jr. Member
  • **
  • Posts: 90
Re: adding tabs to VM Product Page
« Reply #29 on: August 18, 2013, 12:40:49 pm »
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!