E-Store Kit-1 Manual

Content

Installation

Server Requirements:
  • PHP/MySQL support.
  • MySQL database.
  • Zend Optimizer version 2.1.0 or later (get free script to check you server).

Installation Steps:
  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.
  3. Set read/write/execute permissions to catalog/productimages, catalog/productthumbnails directories and mp1vars.php file (Chmod 777) using FTP client.
    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. Run catalog/install.php to configure your MySQL database.
    You will be asked to enter host name or IP address of MySQL server, username , password and database name.
    Ask your host provider about this information if you don't have it.
    Important:
    Delete catalog/install.php and catalog/uninstall.php after installation.
  5. Open admin page (catalog/adm/index.htm) and make all necessary settings according to you preferences.

    Default Control Panel password: admin
    • Change this password A.S.A.P. and keep it in a safe place!
    • Enter your payment gateway settings.
    • Create categories and subcategories of your Catalog.
    • 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.php">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 template (edit only if you use your own menu).
  • catalog/viewdetailstemplate.htm - View Details Page template.
  • catalog/viewcarttemplate.htm - Shopping Cart Page template.
  • catalog/ordertemplate.htm - Checkout 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).
  • "JavaScript: addToCart(###productID###);" - Link to view MagicScripts 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.

    Customizing Shopping Cart Page

    catalog/viewcarttemplate.htm is a Shopping Cart Page template file.
    You can edit this page in any HTML editor. Do not delete any of meta-tags, meta-variables, form or JavaScript in this template.

    The following meta-tags are used to handle Shopping Cart Page:
    • <!--###ROWDATA###--> - Shopping Cart Page displays cart content between these meta-tags if cart is not empty.
    • <!--###NODATA###--> - Shopping Cart Page displays code between these meta-tags if cart is empty.
    • <!--###ROWS###--> - Shopping Cart Page displays product details between these meta-tags.
    The following meta-variables are used to handle Shopping Cart Page:

    • ###title### - displays product title.
    • ###productID### - displays product number.
    • ###quantity### - displays product quantity.
    • ###price### - displays product price.
    • ###subtotal### - displays product subtotal (price x quantity).
    • ###total### - displays order total.

    Customizing Checkout Page

    catalog/ordertemplate.htm is a Checkout 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 Checkout Page:
    • <!--###ROWDATA###--> - Checkout Page displays order details between these meta-tags if order contains products.
    • <!--###NODATA###--> - Checkout Page displays code between these meta-tags if order is empty.
    • <!--###ROWS###--> - Checkout Page displays product details between these meta-tags.
    • <!--###GATEWAY###--> - Checkout Page displays purchase buttons code between these meta-tags.
    The following meta-variables are used to handle Checkout Page:

    • ###num### - displays order number.
    • ###title### - displays product title.
    • ###product### - displays product number.
    • ###quantity### - displays product quantity.
    • ###price### - displays product price.
    • ###subtotal### - displays product subtotal (price x quantity).
    • ###total### - displays order total.
    • ###CALL### - displays payment gateway button to process current order.

    Files Map
    LocationDescription
    catalog/catalog.phpMain script
    catalog/viewdetails.phpView Details script
    catalog/viewcart.phpShopping Cart script
    catalog/order.phpCheckout Page script
    catalog/mp1vars.phpVariables for MySQL connection
    catalog/style.cssStyle sheet
    catalog/menuvars.js DHTML dropdown menu settings
    (you can delete this file if you use your own menu)
    catalog/adm/Control 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/manual/E-store 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 folder
    catalog/res/catalog.jsCatalog navigation JavaScript
    catalog/res/viewcart.jsShopping Cart 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/viewcarttemplate.htmPre-designed Shopping Cart Page template
    catalog/ordertemplate.htmPre-designed Checkout Page template
    catalog/return.htmPre-designed Thank You 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.
    • Do not edit or rename all other files and folders.

    Tips
    • You can use E-store Kit-1 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-store Kit.
    We can install and customize E-store Kit-1 for you for an additional negotiable charge.


    Good Luck and Best Wishes!
     

    © MagicScripts, 2003