Skip to content

Web Catalog Customization

This is a depreciated feature and will be discontinued in a future version. ​ The web site is created by combining templates with the ProfitSystem inventory data. The process is similar to mail merge. There is a set of template files that contain the HTML for each page on the web site, such as the home page, the page showing the details for an item, etc. These template pages contain merge codes (such as <%ITEM1%>) When the web site is created, ProfitSystem processes the template file by substituting the correct HTML code for each merge code. The end result is a page that contains the default template HTML (layout, formatting, etc.) with the information specific to that page merged in. ​ These template files can be modified to change the layout of the web site. If the template files need to be restored to their original state they can be found on the ProfitSystem distribution CD in \SERVER\TPSWINS\WEBTEMPLATES Font and color changes should be made to the STORE.CSS cascading style sheet, instead of making changes directly to the template pages. Font and color changes made there affect all the pages automatically.

Web Site Creation Process

The destination directory is created if it does not exist.

A directory called itemimages is created in the destination directory, if it does not exist.

All the JPG files are copied from the webtemplates directory to the destination directory.

The STORE.CSS file is copied from the webtemplates directory to the destination directory.

The LOGO.BMP located in the ProfitSystem data directory is converted to a JPG file and copied to the destination directory.

The homepage is created by processing the DEFAULT.HTML file, which includes the COPYRIGHT.HTML and MENUBAR.HTML files. Any merge codes are also processed. The file is created in the destination directory using the Home page file name specified.

The THANKS.HTML file is processed and created in the destination directory.

The Vendor file in ProfitSystem is scanned. A page for each vendor is created, using the ITEMLIST.HTML template. The name of the created page is VENDOR[vendor number].HTML. This page displays all the styles for that vendor. This page is displayed when the user clicks a vendor name on the vendor menu on the left side of the page.

A page called ALLVENDORS.HTML is created, using the ITEMLIST.HTML template. This page displays all the styles. This page is displayed when the user clicks selects All Vendors on the vendor menu on the left side of the page.

The inventory is then scanned. Each item that has the 'Show in web catalog?' option checked is processed. For each item a page called ITEM[stylecode].HTML is created from the ITEM.HTML template file. If Request More Email is set to Simple Email, then the FORMHEADERSM.HTML page is merged in, which causes the Request More Information form on the page to use simple email to send the results to the email address specified in 'Email address for request more info'. If it is set to MailForm, then the FORMHEADERMF.HTML page is merged in instead. This form uses the MAILFORM.EXE cgi program to send the results. Also, up to four image thumbnails are created in the ITEMIMAGES sub-directory for the first four images on the style code. Layout of Created Web Site:

DEFAULT.HTML is the home page. It shows the introduction for the site and has a list of all the vendors.

Each vendor has a page called VENDOR[vendor number].HTML, which displays all the styles for that vendor. This page is displayed when the user clicks a vendor name on the vendor menu on the left side of the page.

ALLVENDORS.HTML is a special page that lists all the styles. It is displayed if the user selects All Vendors from the vendor menu on the left side of the page.

Each item has a page called ITEM[style code].HTML This page displays the details for an item, it's pictures, and also includes the form that allows the user to request more information. It is displayed when the user clicks a specific item on the VENDOR.HTML or ALLVENDORS.HTML page.

THANKS.HTML is displayed after the user requests more information.

STORE.CSS is a cascading style sheet used for the colors and fonts on the web site.

Thumbnails of the item images are stored in a folder called itemimages.

Request More Information Methods

The request more information form works in one of two ways, either simple email or mail form. With simple email the user fills out the form on the web site and clicks submit. The uses email program is started and an email is composed that contains the information entered on the form. The user then has to click Send in their email program to send the mail. This method requires no special CGI or programs on the web server, so it can be used with almost any web host. However, it looks less professional than the mailform method to users. ​ Mailform uses a special CGI program on the web server called MAILFORM.EXE. This program must be present on the web server, in a folder called _vti_bin that allows CGI programs to be run. ​

Templates

By default, these templates are stored in \TPSWINS\WebTemplate\ folder. The templates may be edited using a HTML editor.
Some of the template files are HTML fragments instead of full pages. This is because the files are inserted into a larger pages. For example, the COPYRIGHT.HTML template file is added at the bottom of each page.

The template files contains merge codes, as outlined below.

The HTML files are located in \TPSWINS\WebTemplate\ The files are as follows * COPYRIGHT.HTML: This is an HTML fragment and is included at the bottom of each page on the site. It should contain the copyright message for the site. * DEFAULT.HTML: This is the first page displayed as the site starts up. * ITEM.HTML: This page is displayed when the user selects a specific item. It shows all the details and images for a single style, and also contains a form used to request more information. The posting method of the form is either simple email or mail form. Either the FORMHEADERMF.HTML or FORMHEADERSM.HTML file is inserted into this page at merge time to create the correct form posting method. * FORMHEADERMF.HTML: This is an .HTML fragment that is inserted into ITEM.HTML if mailform is the selected Request More Information method. * FORMHEADERSM.HTML: This is an .HTML fragment that is inserted into ITEM.HTML if simple email is the selected Request More Information method. * ITEMLIST.HTML: This page is displayed when the user selects a vendor and all the styles for that vendor are listed. * MENUBAR.HTML: This is an HTML fragment and is included at the top of each page on the site. it contains the navigation menu. * STORE.CSS: This is a Cascading Style Sheet file that contains the styles for the site. * THANKS.HTML: This page is displayed after the user requests more information.

The image files are located in \TPSWINS\WebTemplate\ * cccards.jpg: This logo displays the credit cards accepted, used on the DEFAULT.HTML page. * gradbar.jpg: A horizontal dividing line, used on various pages. * heading.jpg: A logo file, 450x78, that is displayed at the top of each page. * logo.jpg: A logo file, 400x137, that is displayed in the copyright message at the bottom of each page.

Merge codes

  • <%TITLE%> The web site title, set on the configuration page.
  • <%HOMEPAGE%> The actual file name of the home page.
  • <%SITEURL%> The full URL to the web site where it will be hosted.
  • <%MENUBAR%> Inserts the MENUBAR.HTML file.
  • <%VENDORLIST%> A table containing the list of vendors.
  • <%VENDORNAME%> The name of the vendor that's currently being processed.
  • <%MOREINFOEMAIL%> The email address for request more info.
  • <%SHOPWEBSITE%> The name of the shop.
  • <%SHOPWEBSITENAME%> The URL for the shop web site.
  • <%YEAR%> The current year.
  • <%ITEMLIST%> A table containing the list of styles for a vendor.
  • <%DESCRIPTION%> Description for the current style, used on the style detail page.
  • <%PRICE%> Price for the current style.
  • <%NOTES%> Notes for the current style.
  • <%STYLECODE%> Style code.
  • <%ITEM1%> Picture #1 for style.
  • <%ITEM2%> Picture #2 for style.
  • <%ITEM3%> Picture #3 for style.
  • <%ITEM4%> Picture #4 for style.
  • <%COPYRIGHT%> Inserts the COPYRIGHT.HTML file.
  • <%FORMHEADER%> Inserts the FORMHEADERSM.HTML or FORMHEADERMF.HTML, if Request More Info is set to Simple Email or MailForm, respectively.