CRS uses a small number of template pages for displaying categories and products. The main template pages are:
/browse/category.jsp
-- Displays a category that contains child categories but no child products./browse/subcategory.jsp
-- Displays a category that contains child products./browse/productDetail.jsp
-- Displays product details without a SKU color/size picker./browse/productDetailWithPicker.jsp
-- Displays product details with a SKU color/size 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/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:
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 /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.