The top of the template pages displays historical navigation information by listing the hierarchy of categories that a customer has already visited on his or her way to the current page.

For example, if a customer navigates from the top of the Pioneer Cycling catalog to the Clothing page, to the Men’s Jersey’s page, and then to the product page for a men’s Black Arrow Jersey, the navigation history (at the top of the page) looks like this:

Each of the items in the hierarchical navigation is a link. For example, if the user clicks on Clothing she is brought to the category template page for clothing.

If a customer goes directly from the home page to the product page of the Black Arrow Jersey (for example, if it was a featured product on the home page) the historical navigation also reflects the catalog’s hierarchical structure. We wanted the navigation path to be intuitive to the customer and therefore, the historical navigation list reflects the category pages so that the user can have a sense of how this item fits into the catalog. To do this, we invoke the CatalogNavHistoryCollector component with the navAction parameter set to “jump”.

There are two parts to using historical navigation: collecting the information and displaying it.

Collecting the Navigation History

We used the component /atg/commerce/catalog/CatalogNavHistoryCollector to collect the locations visited and to add them to the array of visited locations. In Pioneer Cycling, the visited locations are the repository items that represent the products and categories of the product catalog. This snippet, taken from breadcrumbs.jsp, invokes the CatalogNavHistoryCollector:

<dsp:droplet name="/atg/dynamo/droplet/Switch">
  <dsp:param name="value" param="no_new_crumb"/>
  <dsp:oparam name="true">
  </dsp:oparam>
  <dsp:oparam name="default">
     <dsp:droplet name="CatalogNavHistoryCollector">
        <dsp:param name="navAction" param="navAction"/>
        <dsp:param name="item" param="element"/>
     </dsp:droplet>
  </dsp:oparam>
</dsp:droplet>

There are two things to note in this JSP snippet. Although both these techniques are specific to the Pioneer Cycling implementation, they can be applied to any site. First, notice that the required parameter navCount is not passed to CatalogNavHistoryCollector. The navCount parameter is set in the Java Server Page that invokes this JSP snippet. Since JSP files invoked as servlets from other JSP files are in a sub-scope of their callers, they have access to the same parameters as the caller. Second, we used the no_new_crumb parameter to decide whether to invoke the snippet. This is just a switch on a parameter passed to the page to determine whether to add the current location to the NavHistory or not. However, it demonstrates how we decided to address navigation for pages that do not represent catalog items. For example, the search page, the shopping cart, and the user profile page are not added to the NavHistory like regular catalog pages.

Displaying the Navigation History

The property /atg/commerce/catalog/CatalogNavHistory.navHistory is a LinkedList of locations. The CatalogNavHistoryCollector populates this list as described in the preceding section. The following snippet demonstrates how the navigation history is displayed in Pioneer Cycling. A ForEach component iterates over the NavHistory list and a link is created for each item in the list. Comments in the JSP describe the variations from that behavior.

<dsp:droplet name="/atg/dynamo/droplet/Switch">
 <dsp:param name="value" param="displaybreadcrumbs"/>
 <dsp:oparam name="true">

  <dsp:droplet name="/atg/dynamo/droplet/ForEach">
   <dsp:param bean="CatalogNavHistory.navHistory" name="array"/>
   <dsp:param name="elementName" value="crumb"/>
   <dsp:oparam name="output">

    <dsp:droplet name="/atg/dynamo/droplet/Switch">
     <%
     /* -------------------------------------------------
      * We want to put a separator between the items in the navHistory. In
      * this example we put a greater than sign between them. We use a
      * switch droplet to identify the first item in the array because we
      * don't want to render a separator before the first item.
      * ------------------------------------------------- */
     %>
     <dsp:param name="value" param="count"/>
     <dsp:oparam name="1">
     </dsp:oparam>

     <dsp:oparam name="default">
      &gt;
     </dsp:oparam>

    </dsp:droplet>

    <dsp:getvalueof id="countStr" param="count" idtype="Integer">

    <dsp:getvalueof id="catNavCount"
         bean="/atg/commerce/catalog/CatalogNavHistory.navCount">
    <dsp:getvalueof id="templateUrl" idtype="String"
         param="crumb.template.url">

    <dsp:droplet name="/atg/dynamo/droplet/Switch">
     <%
     /* -------------------------------------------------
      * Use a switch droplet to compare size to count. When
      * they are the same, then we are on the last item in
      * array iterated by the ForEach.
      * ------------------------------------------------- */
     %>
     <dsp:param name="value" param="size"/>
      <dsp:oparam name="<%=countStr.toString()%>">
      <dsp:droplet name="/atg/dynamo/droplet/Switch">
       <%
       /* -------------------------------------------------
        * The last item in the list is generally the item we are
        * currently visiting and should therefore not be a link.
        * In some cases, when we do not want to add a new breadcrumb,
        * we want the last item to be a link. We do this on the
        * shopping cart page, search page, and others. This is
        * indicated by the "no_new_crumb" parameter.
        * ------------------------------------------------- */
       %>
       <dsp:param name="value" param="no_new_crumb"/>
        <dsp:oparam name="true">
        <dsp:a page="<%=templateUrl%>">
         <dsp:valueof param="crumb.displayName"/>
         <%-- These set for breadcrumb navigation: --%>
         <dsp:param name="navAction" value="pop"/>
         <dsp:param name="id" param="crumb.repositoryId"/>
         <dsp:param name="navCount" value="<%=catNavCount%>"/>
        </dsp:a>
       </dsp:oparam>
        <dsp:oparam name="default">
        <dsp:valueof param="crumb.displayName"/>
       </dsp:oparam>
      </dsp:droplet>
     </dsp:oparam>
      <dsp:oparam name="default">
      <dsp:a page="<%=templateUrl%>">
       <dsp:valueof param="crumb.displayName"/>
       <% /* These set for breadcrumb navigation: */ %>
       <dsp:param name="navAction" value="pop"/>
       <dsp:param name="id" param="crumb.repositoryId"/>
       <dsp:param name="navCount" value="<%=catNavCount%>"/>
      </dsp:a>
     </dsp:oparam>
    </dsp:droplet>
    </dsp:getvalueof>
    </dsp:getvalueof>
    </dsp:getvalueof>

    </dsp:oparam>
  </dsp:droplet>

 </dsp:oparam>
</dsp:droplet> <%/* end ForEach */%>
 
loading table of contents...