ShopSite Tip: Listing Products Grouped By Category

Sometimes you want to display a simple list of products, but break the products into different categories.  While ShopSite provides for different sorting options and you can even order the products on the page manually, there is no stock feature to break them into categories.  However, this can be easily accomplished with 2 custom templates and an extra product field.

In this article we’ll review the settings, sample templates, and a demo page where you can see a working example.

The Extra Product Field

Product List SampleThe first step is to select an extra product field (Preferences > Extra Fields) that we will use to store the value of the category.  This category field will be used to break the list of products into different groups.  To help you envision what we’re doing, please click on the screenshot to the right where we have a list of 5 products separated into 2 categories – Cameras, and Accessories.

In our example we’re using Extra Product Field 5 and we’ve named it Category for easy reference.  By editing our products we’ve filled in this field with “Camera” for the 2 cameras and “Misc” for the other items.

The Product Template

To create the small 1-line display for each product we’re using a custom product template.  When the page template loops through the products it will set a variable for the category that we want to display, so the first thing our product template will do is check to see if a product’s extra field matches the value of the variable.  If it does the product is displayed, but if it doesn’t nothing happens.  This allows us to display just the products that match the category.  A copy of the product template from our example is below:

######################
 [-- DEFINE PRODUCT --]
######################
 
[-- IF PRODUCT.Field5 VAR.WhichCat --]
 
<tr>
[-- IF ANALYTICS_MULTI_DOMAIN --]
 <form id="form[-- PRODUCT.RecordNumber --]" action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
 <form id="form[-- PRODUCT.RecordNumber --]" action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<input type="hidden" name="storeid" value="[-- STORE_ID --]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">
<input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]">
 
<td>[-- Product.Name --]</td>
<td>[-- PRODUCT.Sku --]</td>
<td>[-- Product.Price --]</td>
<td><input type="text" size="2" name="[-- PRODUCT.RecordNumber --]:qnty" value="1" ></td>
 
<td>
[-- IF VAR.AddButtonGraphic --]
 <input type="image" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart" onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- ELSE_IF ADDIMAGE? --]
 <input type="image" [--ADDIMAGE--] onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- ELSE --]
 <input type="submit" value="[-- ADDTEXT --]" onClick="return(checkChecker('form[-- PRODUCT.RecordNumber --]'));">
[-- END_IF --]
 
</form>
</td>
 
[-- END_IF --]
[-- END_DEFINE PRODUCT --]

[– IF PRODUCT.Field5 VAR.WhichCat –]

<tr>
[– IF ANALYTICS_MULTI_DOMAIN –]
<form id="form[– PRODUCT.RecordNumber –]" action="[– SHOPPING_CART_URL BASE –]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[– ELSE –]
<form id="form[– PRODUCT.RecordNumber –]" action="[– SHOPPING_CART_URL BASE –]/order.cgi" method="post">
[– END_IF –]
<input type="hidden" name="storeid" value="[– STORE_ID –]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">
<input type="hidden" name="itemnum" value="[– PRODUCT.RecordNumber –]">

<td>[– Product.Name –]</td>
<td>[– PRODUCT.Sku –]</td>
<td>[– Product.Price –]</td>
<td><input type="text" size="2" name="[– PRODUCT.RecordNumber –]:qnty" value="1" ></td>

<td>
[– IF VAR.AddButtonGraphic –]
<input type="image" src="[– OUTPUT_DIRECTORY_URL –]/[– VAR.Media –]/[– VAR.AddButtonGraphic –]" name="Add to Cart" alt="Add to Cart" onClick="return(checkChecker(‘form[– PRODUCT.RecordNumber –]’));">
[– ELSE_IF ADDIMAGE? –]
<input type="image" [–ADDIMAGE–] onClick="return(checkChecker(‘form[– PRODUCT.RecordNumber –]’));">
[– ELSE –]
<input type="submit" value="[– ADDTEXT –]" onClick="return(checkChecker(‘form[– PRODUCT.RecordNumber –]’));">
[– END_IF –]

</form>
</td>

[– END_IF –]
[– END_DEFINE PRODUCT –]

The above template is just a basic sample to create the list shown in our screenshot, but you could certainly customize its layout with additional fields and other information.  For use in our example we’ve saved this product template as “product_list”.

  • NOTE – Do not assign this template to any products.  We’ll pass in the template name when we display the products.

The Page Template

To pull it all together we need a page template that sets our category variable, displays the header for each group of products, and loops through the products to display them.  Any page template will work fine, but the existing [– LOOP PRODUCTS –] section of the template will be replaced with some modified code.  In our example page we’re using the following code:

<table>
#Cameras
[-- VAR.WhichCat Camera --]
<tr><td colspan="5"><strong>Cameras</strong></td></tr>
<tr bgcolor="EEEEEE"><td>Name</td><td>SKU</td><td>Price</td><td>Qty</td><td></td></tr>
[-- LOOP PRODUCTS --]
[-- PRODUCT product_list --]
[-- END_LOOP PRODUCTS --]
 
<tr><td colspan="5"><!-- empty row --></td></tr>
 
#Accessories
[-- VAR.WhichCat Misc --]
<tr><td colspan="5"><strong>Accessories</strong></td></tr>
<tr bgcolor="EEEEEE"><td>Name</td><td>SKU</td><td>Price</td><td>Qty</td><td></td></tr>
[-- LOOP PRODUCTS --]
[-- PRODUCT product_list --]
[-- END_LOOP PRODUCTS --]
</table>

<tr><td colspan="5"><!– empty row –></td></tr>

#Accessories
[– VAR.WhichCat Misc –]
<tr><td colspan="5"><strong>Accessories</strong></td></tr>
<tr bgcolor="EEEEEE"><td>Name</td><td>SKU</td><td>Price</td><td>Qty</td><td></td></tr>
[– LOOP PRODUCTS –]
[– PRODUCT product_list –]
[– END_LOOP PRODUCTS –]
</table>

This is not a complete page template, it’s just a replacement for the [– LOOP PRODUCTS –] through [– END_LOOP PRODUCTS –] section of code from an existing template.  With our custom version it does the following:

  1. Create a table to display the products
  2. Set the variable for the first category (ex: Camera)
  3. Display the category title and header
  4. Loop through the products and use the “product_list” custom product template we created.
  5. Repeat steps 2-4 for any additional categories we want to display (ex: Misc)
  6. Close the table

You can create as many category sections as you want on your page and order them any way you prefer by setting the category variables in the order you want your groups to appear on the page.

  • NOTE – Be sure to assign all the products that you want to appear to this page.

Example Page

A working example page using this method is available here:
http://shopsite-demo.lexiconn.com/product_list.html

Using this method you can easily list your products on a page and group them into as many different categories as you prefer.  By combining additional extra fields or product templates for different categories the options are endless.

Looking for a web host that understands ecommerce and business hosting?
Check us out today!

Leave a Reply