E-commerce Kit Manual

Content

Installation Steps

Important:
Your web host provider should be able to run ASP and MS Access Database! (We recommend www.robows.com)

  1. Unzip archive on your hard drive (You'll get catalog folder containing all necessary files).


  2. Upload catalog folder to your site's root directory using any FTP client.
    Some web hosts providers require that MS Access Database have to be placed into special directory. In such case you should upload catalog.mdb file into that directory and change the path to the database in path.asp file as described below.


  3. Assign read/write permissions to catalog.mdb file.
    Assign read/write/delete permissions to catalog/ProductImages and catalog/ProductThumbnails folders.

    Note: If you do not have privileges to assign appropriate permissions to your files, you should ask server administrator of your web-host provider to do it for you.

  4. If you upload catalog.mdb into a different folder - you will need to change the path to your database (catalog.mdb) by editing path.asp file. Open this file in Notepad or any other text editor. Here you will find the following line:

    Private Const vFileDB = "\catalog\db\catalog.mdb"

    Change "\catalog\db\catalog.mdb" to the actual location of database file from the root of your server.

  5. Open admin page (catalog/adm/) and make all necessary settings according to you preferences.

    Default Control Panel password    : admin
     1. Change this password A.S.A.P. and keep it in a safe place!
    2. Create categories and subcategories of your Catalog.
    3. Enter your products data into the Catalog database.
Control Panel Help contains detailed instructions on how to manage your Catalog.

Now you are ready to call your Catalog from anywhere on your site:
<a href="/catalog/catalog.asp">Our Products</a>

Customizing Catalog Pages

Design and layout of your Catalog pages can be changed by editing the following files:

  • catalog/style.css - Style sheet file.
  • catalog/menuvars.js - DHTML dropdown menu settings.
  • catalog/catalogTemplate.htm - Catalog Main Page template.
  • catalog/menuTemplate.htm - Menu (edit only if you use your own menu).
  • catalog/viewDetailsTemplate.htm - View Details Page template.
Very Important: Do not edit any other files!

Open template files in any HTML editor and make all necessary changes to adjust design/layout of your Catalog according to your preferences. Also you can design your own styles by editing style sheet file catalog/style.css

Meta-variables (###variables###) and meta-tags (meta-variables inside HTML comments) are used to display attributes of your products. If you delete some variables - corresponding data won't be displayed.

Do not delete meta-tags even if you don't need any variables to be displayed (just put two meta-tags together with a space character between).

Customizing Catalog Main Page

catalog/catalogTemplate.htm - Catalog Main Page template file displays list of products, you can edit this page in any HTML editor.
Please don't remove or edit "catalogue" form and it's hidden inputs - it may cause an error.

You can use the following meta-variables to display your products:

General
  • ###Menu### - Container for Menu. If you want to use our dynamic DHTML menu, do not change or remove any <script> tags between <HEAD></HEAD> HTML tags of template file and in the bottom of HTML code (just before </BODY> tag). If you want to use your own menu - you can put it wherever you need (see Customizing Menu).
  • ###ViewCartURL### - Link to view PayPal shopping cart (you can use text link, graphic image or standard button and place this meta-variable wherever you want on your page).
  • "JavaScript: sortColumn('title','###ToSortOrder###');"
    "JavaScript: sortColumn('price','###ToSortOrder###');" - Built-in functions for sorting list of products by Title and by Price. You can put this meta-variables wherever you want on your page and design your own text links or graphic buttons.
Navigation
All available pages of your product list are displayed using HTML code inside <!--###NAVDATA###--> meta-tags and the following meta-variables:

  • ###Previous### and ###Next### - navigation buttons to browse through product list. If there are no corresponding links, "Previous" and "Next" buttons turn invisible (transparent blank image images/blank.gif is used for that). If you want to use custom buttons, simply replace existing image files images/prev.jpg, images/next.jpg and images/blank.gif with your own images.
  • ###Page### - Links to jump directly to the specific page of the product list. The maximum number of pages shown in navigational bar can be set in Control Panel (see Control Panel Help for details).
You can put navigation bar wherever you want on your Catalog Main Page.

Search
Please don't rename the form "search" and it's input "keyword". You can place this form wherever on your page, just make sure not to put it inside the main form - "catalogue". If you don't want to use search on Catalog Main Page - just remove this form.

Product list
All products are displayed using HTML code inside <!--###ROWDATA###--> meta-tags and the following meta-variables:

  • ###productnumber### - displays product number (article number).
  • ###title### - displays product title.
  • ###description### - displays product description.
  • ###price### - displays product price.
  • ###thumbnail### - displays product thumbnail image with link to View Details Page (see Customizing View Details Page). Settings of how to display this page can be set in Control Panel (see Control Panel Help for details).
  • ###image### - displays product image.
  • ###AddToCartURL### - URL of PayPal shopping cart to add a product to (you can use text link, graphic image or standard).

Customizing Menu

Open catalog/menuvars.js file in any text editor. You'll see variables and their descriptions to customize a dropdown DHTML menu according to your preferences.
catalog/menuTemplate.htm is a dropdown DHTML menu file - do not edit this file if you would like to use our dropdown menu.

If you're going to use a permanent tree of Categories/Subcategories of your Catalog, you can create graphic buttons and assign them direct links to corresponding Categories or Subcategories using Link Codes from Control Panel. The sample of such technique is shown in Demo 2. You can also use this technique to create a custom dropdown menu using Dreamweaver. In this case you don't need
to use container ###Menu### and menuTemplate.htm file.

If you have some programming skills and want to create your own custom dynamic menu - a simple basic menu template is included in package: catalog/blank_menuTemplate.htm.
This is how it works:
Main Catalog Page outputs full list of categories/subcategories stored in catalog database ordered by title:

  • ###CID### - category ID.
  • ###CT### - category title.
  • ###SID### - subcategory ID.
  • ###ST### - subcategory title.
<!--###Data###--> - meta-tag delimits header/footer parts of a menu template.
<!--###CatData###--> - meta-tag of category.
<!--###SubData###--> - meta-tag of subcategory.

Customizing View Details Page

catalog/viewDetailsTemplate.htm is a product View Details Page template file.
You can edit this page in any HTML editor. If you delete some meta-variables, corresponding data won't be displayed.

The following meta-variables are used to display product details:

  • ###productnumber### - displays product number.
  • ###title### - displays product title.
  • ###description### - displays product description.
  • ###price### - displays product price.
  • ###thumbnail### - displays a product thumbnail image with link to View Details Page (link settings can be set in Control panel. See Control Panel Help for details).
  • ###image### - displays product image.
  • ###AddToCartURL### - Opens PayPal shopping cart to add current product to it. Contains product number, product title, price and your PayPal account settings (see Control Panel Help for details). You can design text link, graphic image or standard button by your choice.
  • ###ViewCartURL### - Opens PayPal shopping cart. You can design text link, graphic image or standard button by your choice.

Files Map
Location Description
catalog/catalog.asp Main script
catalog/viewDetails.asp View Details script
catalog/path.asp Database path file
catalog/style.css Style sheet
catalog/menuvars.js DHTML dropdown menu settings
(you can delete this file if you want to use your own menu)
catalog/adm Control Panel folder
catalog/adm/top.htm Logo frame file
catalog/adm/1.css Style sheet file
catalog/adm/help.gif Control Panel images
catalog/adm/help_sm.gif
catalog/adm/logo.gif
catalog/cls/ Classes folder
catalog/db/ Database folder
catalog/db/catalog.mdb MS Access database file
catalog/manual/ E-commerce Kit Manual
catalog/help/ Control Panel Help
catalog/images/ Images folder
catalog/ProductImages/ Product images folder
catalog/ProductThumbnails/ Product thumbnails folder
catalog/res/ JavaScript files
catalog/res/catalog.js Catalog navigation JavaScript
catalog/res/ie4.js Dropdown menu JavaScript files.
(You can delete these files if you want to use your own menu)
catalog/res/ie5.js
catalog/res/moz.js
catalog/res/ns4.js
catalog/res/op5.js
catalog/res/op6.js
catalog/res/menu.js
catalog/res/menuinit.js
catalog/res/menustyle.js
catalog/catalogTemplate.htm Pre-designed Catalog Main Page template
catalog/viewDetailsTemplate.htm Pre-designed View Details Page template
catalog/menuTemplate.htm Pre-designed dropdown menu template
catalog/blank_catalogTemplate.htm Blank Catalog Main Page template
catalog/blank_menuTemplates.htm Blank Menu template
catalog/blank_viewDetailsTemplate.htm Blank View Details Page template

Legend:
  • White color indicates that you can edit these files
  • Yellow color indicates that you can rename these files or folders according to changes that you can do in catalog/path.asp file
  • Do not edit or rename all other files and folders

Tips
  • You can use E-commerce Kit to create a non-commercial database-driven website (for example: Gallery of pictures), to do that simply hide "Add to Cart" and "View Cart" buttons.
  • You can insert HTML tags into "Product Description" field (for  example: insert additional images and/or links). Using this technique can dramatically extend possibilities of E-commerce Kit.
We can install and customize E-commerce Kit for you for an additional negotiable charge.

If you have any problems or suggestions please

Good Luck and Best Wishes from SitesOutlet™ Team!
 

Copyright 2002-2003 © inFantasy