WebSphere Commerce Enterprise

Category

The category pages help customers navigate through the Elite starter store by only displaying products based on the category being viewed.The left sidebar displays a full list of subcategories, where the maximum number of displayed subcategories is not limited by the number of existing subcategories. A Show All link is used to display the full list of subcategories when the number of categories is large enough to adversely affect performance or presentation. Products are displayed with their picture, name, and price, and can be added to the current order or compare view without leaving the category page. Switching to the detailed view displays an additional short description for each item. Additional features of the category page include quick info pop ups, serving as hover help for each product, and the ability to add products to the wish list.

Elements of the Category page


Category screen capture
Full size screen capture

Images

  • 1 CategoryFullImage is the header image retrieved according to the appropriate category.

JSP files

  • CategoriesDisplay.jsp represents the entire page.
  • SubCategoriesListDisplay.jsp displays the full list of subcategories on the left sidebar.
  • CategoryOnlyDisplay.jsp represents the area containing all four sections in the screen capture.
  • 2 CategoryOnlyResultsDisplay.jsp displays products in the category.
    Includes:
    • CatalogEntryThumbnailDisplay.jspf, which displays a product image, its price, and Add to Order button.
  • 3 CategoryDisplayExt.jspf represents the category display extension.

e-Marketing Spots

  • There are no e-Marketing Spots on the category page.

Change flow options

  • AJAX shopping cart can be enabled or disabled.

Links and buttons

  • 2
    • When the Add to Order button is clicked:
      • AjaxOrderChangeServiceItemAdd is called if AJAX shopping cart support is enabled.
        • Double-click handling is implemented using JavaScript to prevent multiple requests from being sent.
        • The cursor_wait() method is called and displays the progress bar.
      • OrderChangeServiceItemAdd is called if AJAX shopping cart support is disabled.
        • Double-click handling is implemented using JavaScript to prevent multiple requests from being sent.
    • The Quick Info pop-up window is displayed when the Quick info button is clicked for each product.
    • The Product Details page is displayed when a product is clicked.