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

The template for a given product is specified by the item’s template property. 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 products, the actual product to display is specified through query parameters. The product itself is specified with the productId query parameter, and its parent category is specified with the categoryId query parameter. For example:


The product detail page that a specific product is configured to use 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:

This illustration is described in the preceding text.

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:

This illustration is described in the preceding text.

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:

This illustration is described in the preceding text.

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 (for example, 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.

Copyright © 1997, 2013 Oracle and/or its affiliates. All rights reserved. Legal Notices