Commerce Reference Store uses a small number of template pages for displaying categories and products. The main template pages are:
store.war/browse/category.jsp
-- Displays a top-level category.store.war/browse/subcategory.jsp
-- Displays a subcategory.store.war/browse/productDetailSingleSku.jsp
-- Displays product details for a product that has a single SKU.store.war/browse/productDetailMultiSku.jsp
-- Displays product details for a product with multiple SKUs. Provides a separate quantity field for each SKU.store.war/browse/productDetailColorSizePicker.jsp
-- Displays product details with a color/size SKU picker.store.war/browse/productDetailWoodFinishPicker.jsp
-- Displays product details with a wood finish SKU picker.
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:
the name of a color (taken from the SKU’s
color
property)a
colorSwatch
media item (taken from the SKU’scolorSwatch
property)the availability status of the color, as determined by the Inventory Manager
Each ColorSizeDroplet.Size
object contains:
the name of a size (taken from the SKU’s
size
property)the availability of the size, as determined by the Inventory Manager
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.