Dynamic spry tabs feature for Ecommerce Templates shopping cart software

Dynamic Spry Tabs

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 spry tabbed panel
Setting up a sliding content panel
Adding dynamic content to the panels
Replace the text tabs with icons

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 downloads page and then upload the content of the zip file to your server.

Spry tabs folder listing

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

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

Tab layout

If you want to add reviews and related products tabs to that, go on to the dynamic section here.

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 (if using the HTML editor, make sure they are pasted into the source code window).

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

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

Tabbed panel
(View Demo)

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

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

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

If you need to center the panel on your page, add the following to your css file

div.detaildescription { width: 600px; margin: 0 auto;}

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 downloads page and then upload the content of the zip file to your server.

Spry tabs folder listing

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

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 (View Demo) - use the following

If you are going to use css background tabs (View Demo) - use the following

If you are going to use css colored tabs (View Demo) - use the following

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 (if using the HTML editor, make sure they are pasted into the source code window).

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

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

If you need to center the panel on your page, add the following to your css file

div.detaildescription { width: 600px; margin: 0 auto;}

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

Related tab

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

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

Shopping cart software for: Dreamweaver · CSS · Expression Web · Generic Version · Frontpage · Developer License · Shopping Cart · Mobile store · Demo Store