E-commerce Kit-2 Manual

Content

Installation Steps

Important:
Your web host provider should be able to run ASP, MS Access Database and has pre-installed standard components: Cdonts and MSXML 4.0
(We recommend www.robows.com as a web host provider)

  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. If your web-host provider is using different version of MS XML Parser than MSXML 4.0 or different name to call it as an object (ask server administrator of your web-host provider) you can make all necessary changes by editing xml.asp file in any text editor:

    Const vObjName = "Msxml2.ServerXMLHTTP.4.0"

    Change "Msxml2.ServerXMLHTTP.4.0" to the actual name of the object.
     
  6. 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. Enter your PayPal settings.
    3. Go to PayPal "Profile" - "Selling Preferences" - "Instant Payment Notification Preferences" - turn it on and enter your actual absolute URL of ipn.asp file (example: http://www.yourdomain.com/catalog/ipn.asp).
    4. Create categories and subcategories of your Catalog.
    5. Enter your products data into the Catalog database.
Control Panel Help contains detailed instructions on how to manage your web-store.

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 of E-commerce Kit-1. 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.

Customizing Download Page

downloadTemplate.htm is a product Download Page template file. You can edit this page in any HTML editor. Do not delete any of meta-tags and meta-variables in this template.

The following meta-tags are used to handle secure download process:
  • <!--###DATA###--> - Download Page displays code for instant download between these meta-tags if customer's payment is received successfully.
  • <!--###NODATA###--> - Download Page displays code between these meta-tags if customer returns to Download Page not from PayPal.
  • <!--###WARNING###--> - Download Page displays code between these meta-tags while waiting for response from PayPal IPN (sometimes up to several minutes).
  • <!--###EMAILOK###--> - Download Page displays code between these meta-tags if Confirmation E-mail (see Control Panel Help for details) was successfully sent to customer.
  • <!--###EMAILERR###--> - Download Page displays code between these meta-tags if Confirmation E-mail wasn't sent successfully.
  • <!--###ROWSINST###--> - Download Page displays code between these meta-tags for instant download of purchased product.
  • <!--###ROWSMAIL###--> - Download Page displays code between these meta-tags if purchased product must be delivered via e-mail.
The following meta-variables are used to handle secure download process:

  • ###1name### - displays customer's first name.
  • ###2name### - displays customer's last name.
  • ###e-mail### - displays customer's e-mail.
  • ###TID### - displays transaction number that your customer can use to download purchased product later.
  • ###ProductNumber### - displays Product ID.
  • ###ProductSize### - displays product's file size.
  • ###PID### - product number used for download.


Files Map
LocationDescription
catalog/catalog.aspMain script
catalog/viewDetails.aspView Details script
catalog/download.aspDownload script
catalog/downloadForm.aspDownload Form script
catalog/ipn.aspPayPal IPN script
catalog/path.aspDatabase path file
catalog/xml.aspXML parser name file
catalog/style.cssStyle sheet
catalog/menuvars.js DHTML dropdown menu settings
(you can delete this file if you want to use your own menu)
catalog/admControl Panel folder
catalog/adm/top.htmLogo frame file
catalog/adm/1.cssStyle sheet file
catalog/adm/help.gifControl Panel images
catalog/adm/help_sm.gif
catalog/adm/logo.jpg
catalog/cls/Classes folder
catalog/db/Database folder
catalog/db/catalog.mdbMS 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.jsCatalog 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.htmPre-designed Catalog Main Page template
catalog/viewDetailsTemplate.htmPre-designed View Details Page template
catalog/downloadTemplate.htmPre-designed Download Page template
catalog/menuTemplate.htmPre-designed dropdown menu template
catalog/blank_catalogTemplate.htmBlank Catalog Main Page template
catalog/blank_menuTemplates.htmBlank Menu 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-2 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-2 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