Home > General
Help > Dynamic Spry Tabs
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 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 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
<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
(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
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 (View
Demo) - use the following
<link href="SpryAssets/spry_home_image.css" rel="stylesheet" type="text/css" />
If you are going to use css background tabs (View
Demo) -
use the following
<link href="SpryAssets/spry_home_bgtabs.css" rel="stylesheet" type="text/css" />
If you are going to use css colored tabs (View
Demo) -
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">
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.
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">
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.
|
