Commerce Reference Store uses a small number of template pages for displaying categories and products. The main template pages are:

The template used to display a given item is specified by the item’s template property. So, for example, if a customer clicks on a link to a specific product, the page used to display the product is determined by the value of this property.

Since the same page can be used for different categories or products, the actual category or product is specified through query parameters. For the category templates, the category is specified with the categoryId query parameter. For example:

/browse/category.jsp?categoryId=cat10006

For the product templates, the product is specified with the productId query parameter, and its parent category is specified with the categoryId query parameter. For example:

/browse/productDetailSingleSku.jsp?productId=xprod2035&categoryId=cat10056

Category Pages

Commerce Reference Store top-level categories contain child categories but no child products of their own. These categories use the store.war/browse/category.jsp template, which displays featured products from the child categories, plus links to the child categories on the left. So, for example, the page for Home Accents looks like this:

Subcategories use the store.war/browse/subcategory.jsp template. The page content differs depending on the whether the category contains child products or child categories. If the category includes child categories but no child products of its own, the page displayed is similar to a top-level category page; it shows featured products for the child categories, and links to the child categories. If the category includes child products, however, Commerce Reference Store displays a listing of those products. For example, the page for the Clocks subcategory of Home Accents looks like this:

Product Detail Pages

The product detail page used for a specific product differs depending on the number and type of SKUs the product has. If the product has a single SKU, it can use the productDetailSingleSku.jsp template. This page displays information about the product, includes a quantity field for the SKU, an Add to Cart button, and links for adding the item to a gift list, e-mailing a friend, etc. For example:

If a product has a small number of SKUs, it can use the productDetailMultiSku.jsp template. This page displays a separate quantity field for each SKU. The Analog Watch in the ATG Store Gift Shop > For Him category illustrates this:

Most products with multiple SKUs use a template that includes a SKU picker. Commerce Reference Store has two such templates: productDetailColorSizePicker.jsp, which includes a color/size picker (for clothing-sku items), and productDetailWoodFinishPicker.jsp, which includes a wood finish picker (for furniture-sku items). For example, most clothing items on ATG Store include a color/size picker:

In most cases, templates that include a SKU picker are used only for products that have multiple SKUs. However, these templates can also be used for a product with a single SKU (e.g., a clothing item with only one size value and one color value). In this case, the picker has the single SKU preselected.

How the SKU Picker is Populated

To populate the SKU picker with colors and sizes, the store.war/browse/gadgets/pickerContents.jsp gadget invokes the /atg/store/droplet/ColorSizeDroplet servlet bean. This servlet bean examines all of the product’s SKUs, and for each SKU creates a ColorSizeDroplet.Color object and a ColorSizeDroplet.Size object.

Each ColorSizeDroplet.Color object contains:

Each ColorSizeDroplet.Size object contains:

The store.war/browse/gadgets/pickerColorPicker.jspf page fragment uses the data in the ColorSizeDroplet.Color objects to render the color portion of the color/size picker. The store.war/browse/gadgets/pickerSizePicker.jspf page fragment uses the data in the ColorSizeDroplet.Size objects to render the size portion of the color/size picker.

Similar logic is used to populate the picker with wood finishes, using the /atg/store/droplet/WoodFinishDroplet servlet bean.

See the Inventory Management chapter for more information about availability statuses.