netShop V. The Catalog Pages

netShop's catalog pages, the pages that you use to display your products, are rendered "on the fly" using Server Side Includes (SSI) as well as the cart scripts themselves. One of the most significant benefits of doing this is that when you're updating your inventory, you only need to edit the "products" file.

This document will cover the functions of the two pages, main.shtml and list.html, that comprise the catalog pages of your cart. Methods of sorting, filtering and categorizing your products are also covered.

The Main Catalog page - main.shtml

The main.shtml page is the primary catalog page in your cart. Besides the code creating the layout for the display of your products, this page also contains a number of other elements that are responsible for the funtions of the cart itself.

JavaScript Functions

In an effort to make your customer's shopping experience as efficient and easy as possible, much of the cart functionality occurs with the help of JavaScript. In the following code, taken from the default main.shtml, you'll notice that a file named "cart.js" in referenced.

<html>
<head>
<script src="cart.js"></script>
<title>main.stml - Main catalog page for netShop.</title>
<!-- this is important; it fixes a bug in MSIE -->
<meta http-equiv="pragma" content="no-cache">
</head>
<body>
<h1>Inventory</h1>
<center>

This file works together with some code found in the list.html to enable customers to add and remove products to their carts without having to reload your cart. Should a customer using a JavaScript-challenged browser access your cart, functionality is not lost. They will simply have to update their cart using a button that will appear should this situation arise. More information on the JavaScript functions of the catalog pages is detailed in the list.html section below.

Product Table Layout

The next block of code, again taken directly from the default main.shtml file, contains the code for the titles of your product tables. Lines 13-21 work with list.html to create the table for the product list. Should you want to rearrange the order in which your product attributes are displayed or alter how your products are displayed, both of these pages will have to be modified.

<form name="mycart" action="cart.cgi?update-cart:mycart" method="POST">
<table border="1">
<!-- These are the titles for the cells. If you change these, be sure to also change list.html -->
	<tr>
		<td> </td>
		<td>Product ID</td>
		<td>Price (US)</td>
		<td>Name of item</td>
	</tr>

Sorting and Filtering Functions

The line of code that appears next is an SSI tag that executes one of the cart scripts (cart.cgi), takes the items in your "products" file, builds the rest of the product table using list.html and sorts the products by their IDs. All of this happens between the time this page is requested and when it's finally served. If you are interested in further modifying your cart, for example changing how your products are sorted or even using the cart to categorize your products, this is where you would do it.

20
21

	<!--#exec cgi="cart.cgi?catalog-products:mycart=list.html&SORTBY=id" -->
</table>

Altering the elements in this command allow you to do a number of things:

Sorting - Change how products are sorted in your catalog pages.
Example: To sort your products by another attribute, let's say an attribute called "name", you'd change this line to read like so:

There are also a few flags you can use to modify the sorting behavior:
- +numeric - Normally, the netShop will display a product with an ID of 500 before a product with an ID of 60. In order to have the cart treat these product IDs as numbers and sort them accordingly, simply add this flag to your main.shtml page. Example: &SORTBY=price+numeric
- +reverse - Adding this flag reverses the order in which the products are displayed. Example: &SORTBY=id+reverse
Categorizing/Filtering - Using a portion of your product ID, together with the FILTERIN and FILTEROUT elements, you can choose to restrict the products shown in your cart or even lump like products together.
Although FILTERIN and FILTEROUT work through opposite means, they both can be used to achieve the same effect.
Example: We have a product list that contains movies on DVD and VHS. The media type of the product (DVD or VHS) is distinguished in the product ID. Here's an example of the two entries from the "products" file:
```
DVD-0125KF
	name=Kung Fu Masters Vol. 125
	price=2500
	fmt=DVD
	img=/images/kungfu-mastvol125.jpg
VHS-0125KF
	name=Kung Fu Masters Vol. 125
	price=1500
	fmt=VHS
	img=/images/kungfu-mastvol125.jpg
```
Rather than have all of the movies appear in the same cart, we want to display them separately, having two carts in essence. To do this using FILTERIN, we modify line 22 to read like so:

Using FILTERIN and a regular expression (&FILTERIN=^DVD), the cart will only display the products that have IDs beginning with "DVD". All other products will be omitted.
To do the same thing using FILTEROUT, make line 22 look like:



Instead of including products that begin with "VHS", FILTEROUT will omit them.

Now, the catch with this is that you have to be able to change the products that are being filtered. There are two ways to do this: create multiple main.shtml files or use an SSI command and an environment variable called QUERY_STRING.
- Using Multiple main.shtml Pages - Continuing with the example above, we'd create two main.shtml files, main-dvd.shtml and main-vhs.shtml. The main catalog page for the DVD products would use either FILTERIN (to include the product IDs begining with DVD) or FILTEROUT (to omit the product IDs beginning with VHS). The main catalog page for the VHS products would do the same, omitting or including the correct products.
  If you choose to go this route you should add links to both of the main-*.shtml pages on most of your cart pages (index.html, nocookie.html and both of your main-*.shtml pages). For example, if you're using FILTERIN on you main-*.shtml pages, index.html would have:
  
  <a href="cart.cgi?test=main-dvd.shtml&link-to=nocookie.html&set-cookie:tax=0.05">Movies on DVD</a>
  
  <a href="cart.cgi?test=main-vhs.shtml&link-to=nocookie.html&set-cookie:tax=0.05">Movies on VHS</a>
  
  This is perhaps the simplest option but may become less appealing depending on the number of categories you want to divide your cart into.
- Using SSI and the QUERY_STRING Environment Variable - This option is a little more elegant that using multiple main.shtml pages but requires you to modify almost every page in your netShop.
  
  In your cart pages (index.html, nocookie.html and main.shtml pages) you would again have links going to each "category" of product. However, instead of going to two different main.shtml pages, you use these links to add some text to the Common Gateway Interface (CGI) environment variable QUERY_STRING. The information in the QUERY_STRING will then be extracted and used to generate the products displayed on main.shtml.
  
  The first step is to specify the information to be passed in the QUERY_STRING. This is done through the links to the catalog pages. For example, if you were using FILTERIN on main.shtml, the links on index.html would look like this:
  
  <a href="cart.cgi?test=main.shtml?DVD&link-to=nocookie.html?DVD&set-cookie:tax=0.05">Movies on DVD</a>
  <a href="cart.cgi?test=main.shtml?VHS&link-to=nocookie.html?VHS&set-cookie:tax=0.05">Movies on VHS</a>
  
  The text in bold is the information that's going to be stored in the QUERY_STRING. To ensure that the QUERY_STRING is not dropped and the categorization of your cart is not "broken", your nocookie.html page must also be edited. Line 7 of this file must be changed from this:
  
  <a href="cart.cgi?set-cookie:tax=0.05&link-to=main.shtml">here</a>
  To this:
  <a href="cart.cgi?set-cookie:tax=0.05&link-to=main.shtml?">here</a>
  
  Next, your main.shtml page must be configured to be able to grab this information so that is can display the correct products. To do this, the command on line 22 must be modified like so:
  
  
  
  When this page is parsed by the server, the area in bold will by replaced with the text that you've stored in the QUERY_STRING and the correct products will be displayed on your page.
  
  In addition to this, you'll also need to modify main.shtml's line 30 from this:
  
  <a href="checkout.shtml">Check Out</a>
  To this:
  <a href="checkout.shtml?">Check Out</a>
  As well as line 31 from this:
  <a href="cart.cgi?delete-cookie:mycart&link-to=main.shtml">Empty Cart</a>
  To this:
  <a href="cart.cgi?delete-cookie:mycart&link-to=main.shtml?">Empty Cart</a>
  
  Without the html in bold, which will again be replaced with your categorizing text, the products in your cart would not remain categorized should the user empty the cart or return to the cart from checkout.shtml.
  
  And speaking of checkout.shtml, line 36 of this page must be changed from this:

The code that follows comprises the rest of the page as well as serves as navigation to the rest of the cart.

<noscript>
<!-- the "Update Cart" button will only appear if JavaScript is disabled -->
<input type="submit" value="Update Cart">
</noscript>
</form>
</center>
<a href="checkout.shtml">Check Out</a>
<a href="cart.cgi?delete-cookie:mycart&link-to=main.shtml">Empty Cart</a>
</body>
</html>

As covered above, this code must also be changed should you want to incorporate some product sorting or categorization.

Product Template - list.html

Where main.shtml shoulders most of the work of creating the catalog pages for your cart, a good portion of the page is built by list.html.

Looking at the source of list.html we see what seems to be an incomplete HTML file.

<!-- Item details and "add/remove from cart" information for netShop. This is included into main.shtml -->
<tr>
	<td>
		<a href="cart.cgi?put-another:mycart={id}" onClick="put_another('mycart', '{id}');
		 document.forms.mycart['shoppe_{id}'].value = count_in_cart('mycart', '{id}');
		 return false;">Add</a>
		<input name="shoppe_{id}" type="text" size="2" value="{qty}"
		 onChange="set_count('mycart', '{id}', this.value);">
		<a href="cart.cgi?remove-one:mycart={id}" onClick="remove_one('mycart', '{id}');
		 document.forms.mycart['shoppe_{id}'].value = count_in_cart('mycart', '{id}');
		 return false;">Remove</a>
	</td>
	<td>{id}</td>
	<td>{&format ".price" price}</td>
	<td>{name}</td>
</tr>

Because list.html functions as more of a template, it does not need to contain a full page worth of HTML.

Using SSI, this page is included into main.shtml through the cart.cgi. For every product that's to be displayed, the contents of list.html is spit out.

As list.html and main.shtml both build the product table, if you want to change the layout of your catalog pages, both of these pages must be modified.