The dynamic spry tabs allow you to add dynamic content to the product detail page by showing off your product descriptions in tabbed content that you users can access as they choose.

Getting started with a static tabbed panel

To use the spry tabs you will need to download the static-tabs.zip file available from our free downloads page and then upload the content of the zip file to your server.

Now open proddetail.asp or proddetail.php in your HTML editor and somewhere before the closing </head> tag, add the following

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

If you want to get started quickly and add one just tab labeled "description", set the following in vsadmin/includes.asp

defaultdescriptiontab="<ecttab title=""Description"">"

or in includes.php

$defaultdescriptiontab='<ecttab title="Description">';

This will give you a one tab layout like this

If you want to set up your own tabs manually, log into your control panel and open the product admin page to select the product you want to add the spry tab to. In the long description field copy and paste the following

<ecttab title="Tab One"></ecttab>
Tab One
<p>Tab one content.</p>
<ecttab title="Tab Two"></ecttab>
Tab Two
<p>Tab two content.</p>
<ecttab title="Tab Three"></ecttab>
Tab Three
<p>Tab three content.</p>
<ecttab title="Tab Four"></ecttab>
Tab Four
<p>Tab four content.</p>

That will give you a panel with 4 tabs, which should look something like this

If you want more tabs, you can be adding more lines, for example

<ecttab title="Tab Five"></ecttab>
Tab Five
<p>Tab five content.</p>

The color and dimensions of the tabbed panel is governed by the css file, SpryTabbedPanels.css

Setting up a sliding content panel

If you would prefer a panel where the content slides in, the set up is slightly different.

Download the sliding-tabs.zip file available from our free downloads page and then upload the content of the zip file to your server.

Now open proddetail.asp or proddetail.php in your HTML editor and somewhere before the closing </head> tag, add the following

<link href="SpryAssets/spry_home_image.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SpryEffects.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>

There are 3 css files available in the download, depending on the type of tabs you are going to use

If you are going to use images for the tabs - use the following
<link href="SpryAssets/spry_home_image.css" rel="stylesheet" type="text/css" />

If you are going to use css background tabs - use the following
<link href="SpryAssets/spry_home_bgtabs.css" rel="stylesheet" type="text/css" />

If you are going to use css colored tabs - use the following
<link href="SpryAssets/spry_home_colors.css" rel="stylesheet" type="text/css" />

You will now need to add the following to vsadmin/includes.asp

ecttabs="slidingpanel"

or to vsadmin/includes.php

$ecttabs="slidingpanel";

Now log into your control panel and open the product admin page to select the product you want to add the spry tab to. In the long description field copy and paste the following

<ecttab title="Tab One"></ecttab>
Tab One
<p>Tab one content.</p>
<ecttab title="Tab Two"></ecttab>
Tab Two
<p>Tab two content.</p>
<ecttab title="Tab Three"></ecttab>
Tab Three
<p>Tab three content.</p>
<ecttab title="Tab Four"></ecttab>
Tab Four
<p>Tab four content.</p>

The color and dimensions of the tabbed panel is governed by the css file, which conatins comments relating to each available class.

Adding dynamic content to the panels

It is possible to add the dynamic product reviews and related items features to the tabbed panels.

If you would like to add products reviews and related items, you'll need the following addition to vsadmin/includes.asp

ecttabsspecials="<ecttab title=""Reviews"" special=""reviews""><ecttab title=""Related"" special=""related"">"

or to vsadmin/includes.php

$ecttabsspecials='<ecttab title="Reviews" special="reviews"><ecttab title="Related" special="related">';

You can format the related items to suit your needs with this addition to vsadmin/includes.asp

relatedtabtemplate="<tr><td class=""reltabimage"" rowspan=""2"">%img%</td><td class=""reltabname"">%name% <br /> %price%</td></tr><tr><td class=""reltabdescription"">%description%</td></tr>"

or to vsadmin/includes.php

$relatedtabtemplate='<tr><td class="reltabimage" rowspan="2">%img%</td><td class="reltabname">%name% <br /> %price%</td></tr><tr><td class="reltabdescription">%description%</td></tr>';

...which will give you a related layout like this

The following parameters are available

%img%
%name%
%id%
%price%
%description%

By default the related and reviews will come after the other tabs but you can place them at the beginning by adding the %tabs% parameter for where the other tabs should be, for example

ecttabsspecials="<ecttab title=""Reviews"" special=""reviews""><ecttab title=""Related"" special=""related"">%tabs%"

...or the other tabs can come between them

ecttabsspecials="<ecttab title=""Reviews"" special=""reviews"">%tabs%<ecttab title=""Related"" special=""related"">"

If the product has no related items, the related tab will not be shown.

Replace tabs with icons or images

In the example above we have used text based tabs but you can replace those with images.

You will need to prepare two images for each of the tabs, one that you view and one that will change on mouse over.

All you need to do then is to change

<ecttab title="Tab One"></ecttab>

to

<ecttab title="Tab One" imgov="images/tab1_ov.png" img="images/tab1.png">

... where tab1.png is the tab that shows when first viewed and tab1_ov.png is the mouse over state.