home  ECOMMERCE NETSHOP  : V Catalog Pages 

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.

01
02
03
04
05
06
07
08
09
10
<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.

11
12
13
14
15
16
17
18
19
<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:

Email and Web Hosting by Internet Connection 2004-2009 ©
Contact Us