35
© Ecommerce Templates
Page 181 of 239
The -- - and + ++ buttons allow you to control the visual width of the content
field. This won't affect the content as it is displayed on your pages but will
make it easier to visualize narrow content in the admin.
In the content field, add the details you would like to appear on your pages. If
you are using the FCK HTML Editor click on the downward arrow to view the
available formatting choices.
Click on "Submit" to save your changes.
You should now see the content region(s) you have set up
The Region ID is the identifier you are going to use to add the new content to
your page. Open the store page and find the location where you want to add
the new content. In code / HTML view add the following ...
ASP Version
<% regionid=1 %>
<!--#include file="vsadmin/inc/inccontentregion.asp"-->
PHP Version
<?php $regionid=1; ?>
<?php include "vsadmin/inc/inccontentregion.php" ?>
... where the regionid number corresponds to the identifier from the admin
page shown above. In this example we would be adding the "News" content
but if we were adding the "Footer" content, the regionid would be set to 4.
That's all there is to it. Now upload your page to the server and check the
content is showing correctly. From now on, any modifications made to that
region can be carried out through the store control panel.
NOTE: Make sure that those lines come somewhere after the 4 main ASP /
PHP include lines on your page. If necessary you can move the other 4 lines
further up the code to just after the opening <body> tag.
Setting up content pages
You may want to set up pages where the whole main content of a page is
administered through the store control panel. In this example we are going to
set up an articles section and use the content management system to
populate the main body of the page.
First of all take an existing page on your site and save it as articles.asp or
articles.php depending on which version you are using. Clear out the main
27
182
© Ecommerce Templates
body content so you are left with white space in the center of the page. In
HTML / code view copy and paste the following:
ASP Version
<!--#include file="vsadmin/inc/inccontentregion.asp"-->
PHP Version
<?php include "vsadmin/inc/inccontentregion.php" ?>
Now go into your store control panel and follow the steps above for setting up
a new content region like the "Article - About Us" example in the screenshot.
Once you have added your text, and noted the regionid (in this case region 2),
save your work and open the following page on your site
http://www.yourstoreurl.com/articles.asp?region=2
or
http://www.yourstoreurl.com/articles.php?region=2
You should see the content you have just added through the control panel
within your design. You can now go on setting up more articles through the
control panel and changing the "region=2" in the URL depending on the
regionid associated to it in the content management admin page.
Using articles.asp or articles.php is just an example and you can name the
page whatever you like as long as it is followed by the correct regionid
number. For example you may end up with pages on your site like...
http://www.yourstoreurl.com/articles.asp?region=2
http://www.yourstoreurl.com/aboutus.asp?region=3
http://www.yourstoreurl.com/contactus.asp?region=4
http://www.yourstoreurl.com/news.asp?region=5
... or whatever you would like to call them.
33
© Ecommerce Templates
Page 183 of 239
Tips and Tweaks
Although it's not possible to put database driven content like the minicart or
recently viewed items within the content regions, there is a very simple
workaround. All you need to do is set up two regions and place the minicart or
recently reviewed items box between the two.
In the ASP version the set up would be like this on your page if you wanted to
have the recently reviewed box in the middle of the content regions:
<% regionid=6 %>
<!--#include file="vsadmin/inc/inccontentregion.asp"-->
<!--#include file="vsadmin/inc/increcentview.asp"-->
<% regionid=7 %>
<!--#include file="vsadmin/inc/inccontentregion.asp"-->
for the PHP version, that would be
<?php $regionid=6; ?>
<?php include "vsadmin/inc/inccontentregion.php" ?>
<?php include "vsadmin/inc/increcentview.php" ?>
<?php $regionid=7; ?>
<?php include "vsadmin/inc/inccontentregion.php" ?>
Troubleshooting the content management system
I get an error like "Data source name not found and no default driver
specified" or the content of the page doesn't appear.
It's important that the 4 main ASP or PHP lines come somewhere before the
inccontentregion include line. You can move the 4 ASP / PHP include lines
further up the code, just after the opening <body> tag for example.
I can see the content management fields but there's no HTML editor.
If you are using two vsadmin folders for security or ssl reasons the
htmleditor="fckeditor" or $htmleditor="fckeditor"; will need to be added to each
includes file. Make sure the files have been uploaded to the correct location
on the server by uploading the vsadmin folder that comes with the fckeditor
download to the root of your store. Check the files have made it over to the
vsadmin folder correctly so you should see a partial listing like this...
25
184
© Ecommerce Templates
... with the fckeditor files amongst the store vsadmin files. If you are using two
vsadmin folders for security or ssl reasons, make sure you have uploaded the
fckeditor files to both.
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
26
© Ecommerce Templates
Page 185 of 239
If you want to add reviews and related products tabs to that, go on to the
dynamic tabs help section.
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
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
29
186
© Ecommerce Templates
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";
36
© Ecommerce Templates
Page 187 of 239
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 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
27
188
© Ecommerce Templates
$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.
39
© Ecommerce Templates
Page 189 of 239
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.
Mobile friendly features
In Version 6.2 we added some mobile friendly features to Ecommerce
Templates. The main feature is that the software will detect a mobile user and
change the billing and shipping cart page to a one column layout. For some
users this may well suffice and no other action or integration is necessary,
however if you are serious about giving mobile users an enhanced browsing
experience we have created this help file to explain how to set up a mobile
friendly store.
Getting started
The first thing you will need to do is set up the mobile directory on your server.
You can call it what you like but keep it short like /mob/ or /mobile/.
You can have as many pages as you like in the mobile folder but the minimum
requirement would be an index page cart page, categories page, products
page, product detail page and css file. You can't simply copy your existing
files as they will be too wide so it will be necessary to set up new ones.
Open a blank page in your HTML editor with the following in code view
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mobile site</title>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<meta name="HandheldFriendly" content="true" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
xxx content goes here xxx
32
190
© Ecommerce Templates
</div>
</body>
</html>
and save as blank.html
Making the products page
Save blank.html as products.asp or products.php depending on which version
you are using. For the ASP version replace
xxx content goes here xxx....
with
<!--#include file="../vsadmin/db_conn_open.asp"-->
<!--#include file="../vsadmin/inc/languagefile.asp"-->
<!--#include file="../vsadmin/includes.asp"-->
<!--#include file="../vsadmin/inc/incfunctions.asp"-->
<!--#include file="../vsadmin/inc/incproducts.asp"-->
For the PHP version that would be
<?php include "../vsadmin/db_conn_open.php" ?>
<?php include "../vsadmin/inc/languagefile.php" ?>
<?php include "../vsadmin/includes.php" ?>
<?php include "../vsadmin/inc/incfunctions.php" ?>
<?php include "../vsadmin/inc/incproducts.php" ?>
Also for the PHP version you will need to add the following code right at the
top of the page before doctype declaration, with no spaces before or after...
<?php
session_cache_limiter('none');
session_start();
ob_start(); ?>
Check the page on your mobile device before continuing. If you get an error
message relating to "parent paths" you will need to copy the /vsadmin/ folder
to your new /mobile/ folder and remove the "../" from the paths outlined above.
Do the same for detail, categories and cart pages below.
Documents you may be interested
Documents you may be interested
