Four JSP renderers are included in the store.war/cartridges/ directory, to render the content returned by the ScrollablePromotionalContent-ATGSlot, ScrollableProductSpotlight-ATGSlot , ScrollablePromotionalContent-ATGTargeter, and ScrollableProductSpotlight-ATGTargeter cartridges:
/ScrollablePromotionalContent-ATGSlot/ScrollablePromotionalContent-ATGSlot.jsp/ScrollableProductSpotlight-ATGSlot/ScrollableProductSpotlight-ATGSlot.jsp/ScrollablePromotionalContent-ATGTargeter/ScrollablePromotionalContent- ATGTargeter.jsp/ScrollableProductSpotlight-ATGTargeter/ScrollableProductSpotlight-ATGTargeter.jsp
The first two renderers, ScrollablePromotionalContent-ATGSlot.jsp and ScrollableProductSpotlight-ATGSlot.jsp, are used to render the Default Home Page. The other two renderers are not used out of the box but are provided to support the ScrollablePromotionalContent-ATGTargeter and ScrollableProductSpotlight-ATGTargeter cartridges.
ScrollablePromotionalContent-ATGSlot.jsp
The ScrollablePromotionalContent-ATGSlot.jsp page renders the promotional content items that are returned by the ScrollablePromotionalContent-ATGSlot cartridge.
The page uses a forEach loop to render all of the promotional content items returned by the cartridge; however, only one image is shown on the page at any given time. The other images are hidden from view until they are accessed via scrolling functionality, specifically:
Navigational arrows that allow the customer to horizontally scroll through the images.
A set of image indicators that show which image is currently displayed. Clicking an image indicator scrolls to the associated image immediately.
The scrolling functionality is incorporated through a custom Dojo widget. The widget’s dojotype is atg.store.widget.ScrollablePromotionalContent. The JavaScript code that supports the widget is found in store.war/javascript/widget/ScrollablePromotionalContent.js and the HTML markup for the widget <div> is found in store.war/javascript/widget/template/scrollablePromotionalContent.html. To make the ScrollablePromotionalContent.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/ScrollablePromotionalContent.js"></script>
The ScrollablePromotionalContent-ATGSlot.jsp initializes the ScrollablePromotionalContent widget with a set of input parameters, shown below.
Parameter | Type | Description | Default |
|---|---|---|---|
| String | Unique identifier for the | None |
| Number | The number of promotional content items contained in the content item returned by the | None |
| String | The style set on the widget span. This value is set to | None |
Note: The ScrollablePromotionalContent widget does not use the siteContextPath, previousLinkTitle, and nextLinkTitle parameters shown in the ScrollablePromotionalContent-ATGSlot.jsp.
The ScrollablePromotionalContent-ATGTargeter.jsp page functions identically to the ScrollablePromotionalContent-ATGSlot.jsp page. Because the /atg/endeca/assembler/cartridge/renderer/ContentItemToRendererPath component maps cartridges to their renderers by comparing names, the ScrollablePromotionalContent-ATGSlot and ScrollablePromotionalContent-ATGTargeter cartridges each have their own renderers. See the ATG-Endeca Integration Guide for more details on the ContentItemToRendererPath component.
ScrollableProductSpotlight-ATGSlot.jsp
The ScrollableProductSpotlight-ATGSlot.jsp page renders the set of featured products that is returned by the ScrollableProductSpotlight-ATGSlot cartridge. This page functions very similarly to the ScrollablePromotionalContent-ATGSlot.jsp page. It uses a forEach loop to render all of the products returned by the cartridge; however, only a specified number of products are shown at any given time (out of the box, this value is set to 5). The other products are accessed via the following scrolling functionality:
Navigational arrows that allow the customer to horizontally scroll through the pages of products.
An indicator that shows which page of products the customer is currently viewing and the total number of pages.
When the previous or next arrow is clicked, the carousel scrolls to the next page of products. When a product is clicked, the product detail page for that particular product is rendered.
Again, like the ScrollablePromotionalContent-ATGSlot.jsp page, the scrolling functionality for ScrollableProductSpotlight-ATGSlot.jsp is incorporated through a custom Dojo widget. The widget’s dojotype is atg.store.widget.ScrollableProductSpotlight. The JavaScript code that supports the widget is found in store.war/javascript/widget/ ScrollableProductSpotlight.js and the HTML markup for the widget <div> is found in store.war/javascript/widget/template/ ScrollableProductSpotlight.html. To make the ScrollableProductSpotlight.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/ ScrollableProductSpotlight.js"></script>
The ScrollableProductSpotlight-ATGSlot.jsp initializes the ScrollableProductSpotlight widget with a set of input parameters, shown below.
Parameter | Type | Description | Default |
|---|---|---|---|
| String | Unique identifier for the | None |
| Number | The number of products to render per page. | None |
| Number | The total number of products contained in the content item returned by the | None |
| String | In the JSP, this parameter is set to | None |
Note: The ScrollableProductSpotlight widget does not use the previousLinkTitle and nextLinkTitle parameters shown in the ScrollableProductSpotlight-ATGSlot.jsp.
The ScrollableProductSpotlight-ATGTargeter.jsp page functions identically to the ScrollableProductSpotlight-ATGSlot.jsp page. Because the /atg/endeca/assembler/cartridge/renderer/ContentItemToRendererPath component maps cartridges to their renderers by comparing names, the ScrollableProductSpotlight-ATGSlot and ScrollableProductSpotlight-ATGTargeter cartridges each have their own renderers. See the ATG-Endeca Integration Guide for more details on the ContentItemToRendererPath component.
