Our product catalog will be a means for the customer to see the products that we carry. Our products are (hopefully) sorted into meaningful categories, so what we have to do is provide the user with an easy way to navigate the categories and see the products under each one.

Our category tree is built recursively, so our product navigation scripts are very easy to write. The general process will be like so (starting from the Top category):

1. PHP page to list all sub-categories under the current category
2. When a user clicks on a sub-category, repeat step 1 with the selected sub-category

That’s it, we can navigate and traverse the tree using just one script -- clean and simple!

When we are displaying the contents of a category, we will show:

• The sub-categories under the current category
• All the parent categories leading back to the top category
• The products under the current category
• A summary of the shopping cart

So how does this all fit on the screen? Here is a simple layout that will do the trick:

• Section 1:
  The site header is the standard header we’ve been using all along. It shows the name of the current page (DOC_TITLE) and login links.

• Section 2:
  Our standard site navigation links go here.

• Section 3:
  Here we will display a summary of the customer’s shopping cart. We will show the number of items in their shopping cart as well as the total price.

• Section 4:
  Here we will show the navigation path from the current category back up to the top category. For example, if you were currently in the Icecream category, it might look like this:
  
  Top > Snacks > Icecream
  
  Showing all the categories that lead from the Top category to the Icecream category.
Here we will show the navigation path from the current category back up to the top category. For example, if you were currently in the category, it might look like this:Showing all the categories that lead from the Top category to the Icecream category.

• Section 5:
  This is the area in which we print out a list of all the subcategories under the current category. For example, if we were under the Snacks category, we would expect a list of sub-categories like Chips, and Icecream, etc. to show up here. If there are no sub-categories, we should print out "None".
This is the area in which we print out a list of all the subcategories under the current category. For example, if we were under the category, we would expect a list of sub-categories like , and , etc. to show up here. If there are no sub-categories, we should print out "None".

• Section 6:
  This is where we print out the products that are available for sale under the current category. When a user clicks on a product, they should be taken to the product details page where we display detailed information about the product. We also provide a link here for the user to add the items into the shopping cart.

• Section 7:
  Our standard footer that contains the cheesy slogan :)

To recap, sections 4 and 5 work together in letting the customer navigate the product catalog (or more correctly the product category tree). Section 4 provides backwards navigation (to move up the category tree) while section 5 provides forward navigation (down the tree). Along the way, we display products in the current category in section 6, and we always show the shopping cart summary in section 3.

This is just an example of how you can arrange the screen. Since everything is in template files, you are free to rearrange things to make the site more customer-friendly. Make it easy to find your products, and make it even easier to buy something :)