ATG Commerce Reference Store Overview

CRS 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/productDetail.jsp?productId=xprod2035&categoryId=cat10056

Category Pages

The category page used for a specific category differs depending on whether or not the category contains child products. If the category includes child categories but no child products of its own, ATG Store uses the /browse/category.jsp template. This template displays a listing of the featured products in the child categories. So, for example, the page for Footwear (which has Men’s Shoes and Women’s Shoes child categories) shows featured men’s and women’s shoes:

If the category includes child products, ATG Store uses the /browse/subcategory.jsp template. This template displays a listing of the category’s child products:

Product Detail Pages

The product detail page used for a specific product differs depending on whether the size and color properties of its SKUs have values or are null. If the size and color properties are null (e.g., products in the Home Store category), ATG Store typically uses the /browse/productDetail.jsp template. This page displays information about the product, includes a quantity field for each SKU, an Add to Cart button, and a More Actions drop-down with options for adding the item to a gift list, emailing a friend, etc. For example:

In most cases, products displayed with the /browse/productDetail.jsp template have only one SKU. However, this template can also be used for products with multiple SKUs. In this case, the page displays a separate quantity field for each SKU. The Analog Watch in the Gift Ideas -> For Him category illustrates this:

If the size and color properties of the SKUs are not null, ATG Store typically uses the /browse/productDetailWithPicker.jsp template. This template is similar to /browse/productDetail.jsp, but adds a color/size picker. For example:

In most cases, products displayed with the /browse/productDetailWithPicker.jsp template have multiple SKUs. However, this template can also be used for a product with a single SKU (i.e., only one size value and one color value). In this case, the picker has the single SKU preselected.

How the Picker is Populated

To populate the picker with colors and sizes, the /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 /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 /browse/gadgets/pickerSizePicker.jspf page fragment uses the data in the ColorSizeDroplet.Size objects to render the size portion of the color/size picker.

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