The store.war/cartridges/HorizontalResultsList/HorizontalResultsList.jsp renderer retrieves the product IDs from the response HorizonalResultsList content item. It uses those IDs to retrieve product details from the Catalog repository and then renders the product details on the page in a scrolling Dojo widget. The HorizontalResultsList.jsp may be called in two circumstances: the first time the HorizontalResultsList cartridge is rendered on a page or to respond to AJAX calls from the scrolling widget to get additional product data once the initial set of products have been scrolled through.
The first time the HorizontalResultsList.jsp page renders the HorizontalResultsList cartridge, it initializes and renders a custom Dojo widget and then renders the product details inside this widget. The widget provides the scrolling functionality with Next and Previous buttons. The widget’s dojotype is atg.store.widget.HorizontalResultsList. The JavaScript code that supports the widget is found in store.war/javascript/widget/template/HorizontalResultsList.js and the HTML markup for the widget <div> is found in store.war/javascript/widget/template/HorizontalResultsList.html. To make the HorizontalResultsList.js source available to Commerce Reference Store pages, the following script include tag is added to store.war/includes/pageStartScript.js:
<script type="text/javascript" src="${javascriptRoot}/widget/HorizontalResultsList.js"></script>
To render the initial content in the widget, the HorizontalResultsList.jsp page retrieves the product IDs from the HorizonalResultsList content item that the Assembler passed in with the request and passes those IDs to the /atg/commerce/catalog/ProductLookup servlet bean. The ProductLookup servlet bean generates the HTML markup for the initial set of products.
By default, the HorizontalResultsList cartridge is configured to return 12 products. The HorizontalResultsList widget allows the customer to scroll through those products, viewing four at a time, without making additional requests for content. When the customer scrolls past the last product, additional data is required. To get the additional data, the widget makes an AJAX request back to the HorizontalResultsList.jsp page. For this request, the HorizontalResultsList.jsp page’s job is to return the HTML markup for the additional products to be rendered. The widget itself is already initialized and rendered on the page, so only the product data needs to be refreshed.
Because this subsequent product data request is coming via an AJAX request, and not from the Assembler, there is no content item included with it. Consequently, when the HorizontalResultsList widget creates the AJAX request, it must include the following:
A
contentCollectioninput parameter that specifies the path to the content folder that contains theHorizontalResultsListcartridge. In the case of Commerce Reference Store, this path is/content/Shared/Results List.The index of the first product to retrieve. For example, if the customer is viewing products 9 through 12, and then clicks Next, the AJAX request will specify product 13 as the first product to retrieve.
The HorizontalResultsList.jsp page uses these values as input parameters when it invokes the Assembler using the /atg/endeca/assembler/droplet/InvokeAssembler servlet bean. In response, the Assembler returns a HorizontalResultsList content item that contains IDs for the next set of 12 products, starting with the specified product; in our example, this would be products 13 through 24. Subsequent requests for additional products use this same AJAX request mechanism. Retrieved product data is cached, so no additional requests have to be made for products that have already been viewed by the customer (note that this means clicking the Previous link always calls cached data, so an AJAX call is not required for clicking the Previous link).
To determine whether a request is for an initial page load or for subsequent product data, HorizontalResultsList.jsp examines the request for a content item. The presence of a content item indicates that the request came from the Assembler and is for an initial page load. The absence of a content item indicates that the request is an AJAX request and is for subsequent product data. Therefore, when a content item is included in the request, HorizontalResultsList.jsp renders both the widget and the product details. When no content item exists, HorizontalResultsList.jsp requests the additional data from the Assembler and then returns only the HTML markup for the additional product data.
The HorizontalResultsList widget has a set of required initialization parameters, described in the following table:
Parameter | Type | Description | Default |
|---|---|---|---|
| String | Unique identifier for the | None |
| String | The URL used for AJAX requests for the previous or next results. | None |
| String | The path to the Endeca content folder that contains the | None |
| String | Title for the Next link. | “next” |
| String | Title for the Previous link. | “previous” |
| String | The context path for the URL that is used for AJAX requests, for example:
| None |
| Number | The total number of records contained in the | 0 |
| Number | The number of records that should be viewed at a time within the scrollable widget. | 4 |
You must provide values, via attributes passed to the widget, for parameters that do not have defaults. For example, the HorizonalResultsList.jsp passes the following values:
<span dojotype="atg.store.widget.HorizontalResultsList"
id="horizontalResultsList"
ajaxUrl="${pagingAction}"
contentCollection="/content/Shared/Results List"
siteContextPath="${contextPath}"
pageSize="${recsPerPage}"
totalNumberOfRecords="${totalNumRecs}"
previousLinkTitle="${previous}"
nextLinkTitle="${next}">
