Author Topic: How to add tabs to your product view page - tutorial  (Read 17472 times)

AndyNZL

  • Beginner
  • *
  • Posts: 32
    • IPO Digital Design
How to add tabs to your product view page - tutorial
« on: October 01, 2008, 13:04:43 pm »
Joomla 1.5 has mootools integrated into it for creating various effects in the admin area. These can also be used in the frontend on your virtuemart product pages if you initiate the class first (and nothing else on your page is using the class).
The code is ...

Code: [Select]
<?
jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance
//2nd Parameter: Which tab is open on page load (zero based index)

$pane =& JPane::getInstance('tabs', 0);
echo $pane->startPane( 'pane' );

echo $pane->startPanel( 'DESCRIPTION', 'panel1' );
echo "<h3>Description:</h3>".$product_description."<br>";
echo "<h3>Dimensions:</h3>Length: <strong>".$product_length." ".$product_lwh_uom."</strong> - ";
echo "Width: <strong>".$product_width." ".$product_lwh_uom."</strong><br>";
echo "Height: <strong>".$product_height." ".$product_lwh_uom."</strong> - ";
echo "Weight: <strong>".$product_weight." ".$product_weight_uom."</strong><br>";
echo $pane->endPanel();

echo $pane->startPanel( 'TECHNICAL', 'panel2' );
echo "gfgdfgfgdfgd";
echo $file_list;
echo $pane->endPanel();

echo $pane->startPanel( 'REVIEWS', 'panel3' );
echo $product_reviews;
echo $product_reviewform;
echo $pane->endPanel();

echo $pane->startPanel( 'SHIPPING', 'panel3' );
echo "This is the panel to display shipping terms and conditions (and rates)";
echo $pane->endPanel();

echo $pane->endPane();
?>

For a suitable style sheet, simply copy the styles from the admin or ...
Code: [Select]
dl.tabs { float:left; margin:0px 0 -1px 0; z-index:50; }
dl.tabs dt { float:left; width:120px; height:32px; line-height:32px; color:white; text-align:center; margin-right:1px;  }
dl.tabs dt.open { background:url(../images/tab2.gif) top left no-repeat; z-index: 100; }
dl.tabs dt.closed { background:url(../images/tab.gif) top left no-repeat; z-index: 100; }
div.current { clear:both; width:710px; min-height:370px; border:1px solid #ccc; padding:10px 10px; background:#ebeaea; }
div.current dd { padding:0; margin:0; }

Obviously you'll need to use different images :-)
Enjoy

Jermaine Watkins

  • Beginner
  • *
  • Posts: 24
Re: How to add tabs to your product view page - tutorial
« Reply #1 on: October 04, 2008, 05:44:42 am »
THanks

Lylene

  • Jr. Member
  • **
  • Posts: 118
Re: How to add tabs to your product view page - tutorial
« Reply #2 on: November 14, 2008, 16:28:37 pm »
Hi

I am a newbie in VM. Regarding your post : where do you place the code (file) ?

Thanks

monoe

  • Beginner
  • *
  • Posts: 3
Re: How to add tabs to your product view page - tutorial
« Reply #3 on: December 14, 2008, 18:53:49 pm »
Thank's...
You got my hair lost 2 much...

Greg P

  • Beginner
  • *
  • Posts: 48
Re: How to add tabs to your product view page - tutorial
« Reply #4 on: December 16, 2008, 06:19:54 am »
This is great, have been looking all over for something like it!

How do you apply it to have the same tab/pane appearance as the product maintenance page?  The admin pages that use tabs seem to use a slightly difference variation of this, and with it, a different implementation of CSS. It's the "buttonized" tabs that I'm trying to duplicate.

Thanks in advance!

klutzon

  • Jr. Member
  • **
  • Posts: 319
  • Knuckles the Echidna
    • Rage3D
Re: How to add tabs to your product view page - tutorial
« Reply #5 on: January 21, 2009, 02:13:06 am »
Thanks for the tutorial AndyNZL! :D I was planning on using a different approach, but I'm glad to see there's a simple way of achieving tabs in the product pages.

Ninjab

  • Jr. Member
  • **
  • Posts: 78
Re: How to add tabs to your product view page - tutorial
« Reply #6 on: February 27, 2009, 06:28:55 am »
Can someone please explain how you exactly go about installing this? I have no idea, I cant understand how you do it :(

Thanks.

Ninjab

  • Jr. Member
  • **
  • Posts: 78
Re: How to add tabs to your product view page - tutorial
« Reply #7 on: March 01, 2009, 06:59:42 am »
Anyone know how to install/implement what is shown above in this tutorial?

Thanks.

flipsidedesigns

  • Beginner
  • *
  • Posts: 4
Re: How to add tabs to your product view page - tutorial
« Reply #8 on: March 14, 2009, 22:55:22 pm »
This was VERY useful. Worked right away!

I'm wondering if you could post a tutorial that would use the same mootools to display the categories as a module in a slider accordion! (like the sliders on the right side of the main joomla admin page)

I looked at the admin source code but don't know enough to piece it together from the info in this tutorial + the source...

Anyway, thanks!

Lylene

  • Jr. Member
  • **
  • Posts: 118
Re: How to add tabs to your product view page - tutorial
« Reply #9 on: March 20, 2009, 20:57:44 pm »
is this to be put in the flypage ?

thanks in advance for anyone help (as some people seems to know without helping others ...)

flipsidedesigns

  • Beginner
  • *
  • Posts: 4
Re: How to add tabs to your product view page - tutorial
« Reply #10 on: March 20, 2009, 21:09:42 pm »
Yes, the code goes in the flypage.  :)

for those that don't know where that is, depending on how you have your site, it can be found here:

yoursite.com/components/com_virtuemart/themes/default/templates/product_details/ --> flypages are in here.

I made a copy of one that suited my needs and then put in the code for the tutorial.

Hope this helps.

Lylene

  • Jr. Member
  • **
  • Posts: 118
Re: How to add tabs to your product view page - tutorial
« Reply #11 on: March 22, 2009, 23:56:07 pm »
thanks :)

ifx

  • Beginner
  • *
  • Posts: 9
Re: How to add tabs to your product view page - tutorial
« Reply #12 on: June 04, 2009, 07:05:41 am »
hi..
how to modify the tabs so it can be have different color when it clicked?
how to remove the older description of the product? I've the older description in above the flypage,,
what php i've to erase?

lipes

  • Full Member
  • ***
  • Posts: 720
Re: How to add tabs to your product view page - tutorial
« Reply #13 on: December 11, 2010, 03:25:38 am »
Thaaaaaanks!!! This is Very very USEFULL!!! THIS must be an "MUST HAVE" in the next version of VM. VM must advanced in time with more FREE options to all users and not get STOPPED in time waiting for some users help, hacks, tricks, etc.. and see the others CMS on constant progress..
Some tricks of code that are scattered in this forum should be probed and picked up and given to the entire community in the new versions. Decreasing the number of posts and waiting time looking for the resolution to the situations of users. Many white hair and dandruff that we seek in order to resolve the situation ..
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

lipes

  • Full Member
  • ***
  • Posts: 720
Re: How to add tabs to your product view page - tutorial
« Reply #14 on: December 15, 2010, 15:49:22 pm »
It's possible to call a funtion/add a Youtube videos or any other file type in the specific product flypage lateral Tab? This new tab must be different from the Tab that shows the "product description" or "short description". And add different videos in the products not the same for all..
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25