Oracle ATG Web Commerce

<dsp:droplet name="InvokeAssembler">
  <dsp:param name="contentCollection"
             value="/content/Shared/Global Search Configuration/Search Box"/>
  <dsp:oparam name="output">
    <dsp:getvalueof var="searchBox"
                    vartype="com.endeca.infront.assembler.ContentItem"
                    param="contentItem" />
  </dsp:oparam>
</dsp:droplet>

In response to this code, the Assembler returns a ContentSlot object that contains a SearchBox content item. The <crs:pageContainer> tag uses the <dsp:renderContentItem> tag to locate the SearchBox.jsp renderer and render the SearchBox content item. More details on the SeachBox.jsp page are provided in the next section.

Note: See the ATG Endeca Integration Guide for detailed information on the <dsp:renderContentItem> tag.

JSP Renderer

The store.war/cartridges/SearchBox/SearchBox.jsp page renders the content in the SearchBox content item. This includes both the search box form itself and the auto-suggest panel, if one has been enabled.

The SearchBox.jsp page renders the auto-suggest panel inside a custom Dojo widget. The renderer uses the value of the contentItem.autoSuggestEnabled boolean to determine whether or not the auto-suggest widget should be initiated. When initiated, the widget retrieves, via AJAX calls, a list of potentially matching search terms (auto-suggestions) based on the characters the shopper enters in the search box. The widget displays the auto-suggestions as a list of clickable links below the search box. Clicking one of these links initiates a new search with the link’s term used as the keyword.

The auto-suggest widget’s dojotype is atg.store.widget.AutoSuggest. The JavaScript code that supports the widget is found in store.war/javascript/widget/template/AutoSuggest.js and the HTML markup for the widget <div> is found in store.war/javascript/widget/template/AutoSuggest.html. To make the AutoSuggest.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/AutoSuggest.js"></script>

The SearchBox.jsp initializes the AutoSuggest widget with a set of input parameters, shown below. These input parameters allow the widget to build up and submit the URL that requests auto-suggest data from the Assembler. They also control the length of time that the auto-suggest panel is displayed.

Parameter	Type	Description	Default
`id`	String	Unique identifier for the `AutoSuggest` widget.	None
`ajaxUrl`	String	The URL used for AJAX requests that retrieve the auto-suggestions.	None
`contentCollection`	String	The path to the Endeca content collection that contains the `AutoSuggestPanel` cartridge whose content will be rendered. In the case of Commerce Reference Store, this is `/content/Shared/Auto-Suggest Panels`.	None
`siteContextPath`	String	The context path for the URL that is used for AJAX requests, for example: `/crs/storeus` `SearchBox.jsp` looks up the `contextPath` from the `originatingRequest` object and passes it to the widget using the `siteContextPath` property.	None
`searchBoxId`	String	The ID of the search box that the widget is attached to.	None
`submitButtonId`	String	The ID of the Search button. The `AutoSuggest` widget uses this button’s ID to automatically submit the search when the user has selected an item from the auto-suggest list. The widget updates the text in the search box and then simulates a click on the Search button.	None
`minInputLength`	Number	The number of characters the shopper must enter before the auto-suggest panel appears.	3
`animationDuration`	Number	The time, in milliseconds, taken to fade in and out the auto-suggest panel.	500

The query the AutoSuggest widget sends to the Assembler specifies JSON as the format for the returned data. In response to the query, the Assembler returns an AutoSuggestPanel content item in JSON format. The AutoSuggestPanel content item contains DimensionSearchAutoSuggestItems sub-items; it is these sub-items that contain the actual auto-suggestions. The widget parses out the data in the DimensionSearchAutoSuggestItems sub-items and renders them as clickable links in the panel.

In addition to querying the Assembler for auto-suggestions, the AutoSuggest widget manages keyboard events and mouse clicks so that the shopper can move among auto-suggestion terms, select a term, or hide the auto-suggest panel. Also, note that the widget fails silently if the AJAX request times out or fails for any reason, as the use of the auto-suggest panel is not essential in order to perform a search.

To use the AutoSuggest widget, you must provide values, via attributes passed to the widget, for any initialization parameters that do not have defaults. For example, the SearchBox.jsp passes the following values:

<span dojotype="atg.store.widget.AutoSuggest"
              id="autoSuggest"
              ajaxUrl="${contextPath}/assembler"
              contentCollection="/content/Shared/Auto-Suggest Panels"
              siteContextPath="${contextPath}"
              searchBoxId="atg_store_searchInput"
              submitButtonId="atg_store_searchSubmit"
              minInputLength="${minAutoSuggestInputLength}"
              animationDuration="500">
        </span>

SearchBox

Auto-Suggest Functionality

Template

Including the SearchBox in the Page Header

JSP Renderer

ATG Commerce Reference Store Overview