Menu
◊ Introduction
◊ eStore-1 Plan
   Demo
   Control Panel
   Manual
◊ eStore-2 Plan
   Demo
   Control Panel
   Manual
◊ Compare Plans
◊ Hosting Demo
◊ Hosting Guide
◊ Terms of Use
◊ Contact Us

eStore-2 Manual
Content

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.
  • catalog/download/return.htm - Download 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).

Back to Top


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).
  • ###ShowCart### - Keep this variable if you want to display shopping cart everytime the new product is added.
  • ###ViewCartURL### - Link to view CwebUSA shopping cart (you can use text link, graphic image or standard button and place it 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.
    • "JavaScript: addToCart(###productID###); return false;" - Built-in function to add a product to shopping cart (you can use text link, graphic image or standard button).

    Back to Top


    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 eStore-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.

    Back to Top

    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.

    Back to Top

    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.

    Back to Top

    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.

    Back to Top

    Customizing Download Page

    catalog/download/return.htm is a 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 some data are missing.
    • <!--###WARNING###--> - Download Page displays code between these meta-tags while waiting for response from Payment Gateway (sometimes up to several minutes).
    • <!--###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.
    • ###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.


    Back to Top


    Files Map
    LocationDescription
    catalog/mp2vars.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/download/Payment confirmation and secure download scripts 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/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/download/return.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

    Important:
    • White color indicates that you can edit these files.
    • Yellow color indicates that you can rename these files according to your payment gateway (merchant) settings.
    • Do not edit or rename all other files and folders.

    Back to Top


    Tips
    • You can use eStore-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 eStore-2.

    © CwebUSA, 2004
    Special Features: XMicro Toolbar | CwebUSA Merchant Ratings | About Us | Contact Us
    Privacy | Help | Multimedia - Design Studio | Member's Login | Build a Store
    CWebUSA Shopping Engine: Shopping Ads | Register for Merchant Account | Merchant Login
    CWEB News | CWEB Video | CWEB Classifieds | CWEB Singles

    Copyright © 2004, All Rights Reserved. Trademarks property of respective owners.

    Powered by CWEB
     

    CWebUSA.com! - Worldwide.
    Europe: UK,Ireland,France,Germany,Greece,Italy,Swiss,Spain,Norway
    Asia Pacific: Australia,New Zealand,China,Hong Kong,Taiwan,Singapore
    Americas: USA,US,Puerto Rico,Canada
    South America,Central America and more…