Modify the store JSP pages to display the new navigation suggestion group for warranty terms

In this lesson, you are modifying your store JSP pages to ensure that your new navigation suggestion group displays when shoppers search on your storefront.

About this task

Procedure

In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > include > styles > style1.
Open CachedHeaderDisplay.jsp for editing.
Edit the CachedHeaderDisplay.jsp file to include
1. Locate the following code:
```
<div id="autoSuggestStatic_1"></div>
<div id="autoSuggestStatic_2"></div>
<div id="autoSuggestStatic_3"></div>
```
2. After the preceding code snippet, add the following line of code to create the Id for a fourth navigation suggestion group to display in your storefront:
```
<div id="autoSuggestStatic_4"></div>
```
3. Locate the following code snippet:
```
// The auto suggest container ID's
		var staticContentSectionDiv = ["autoSuggestStatic_1", "autoSuggestStatic_2", "autoSuggestStatic_3"]
```
4. Add the variable, "autoSuggestStatic_4", which adds the Warranty navigation suggestion grouping to the store JSP to have the new grouping display in the storefront. Ensure that your code snippet resembles the following code:
```
var staticContentSectionDiv = ["autoSuggestStatic_1", "autoSuggestStatic_2", "autoSuggestStatic_3","autoSuggestStatic_4"];
```
Save and close the file.
In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > Snippets > Search.
Open CachedSuggestions.jsp for editing.

Locate the following code for the web service call to retrieve the navigation suggestion group information:

<wcf:getData type="com.ibm.commerce.catalog.facade.datatypes.CatalogNavigationViewType" var="catalogNavigationView" 
expressionBuilder="getCatalogNavigationView" scope="request" varShowVerb="showCatalogNavigationView" scope="request">
	<wcf:param name="searchProfile" value="IBM_findNavigationSuggestions" />
	<wcf:param name="categoryId" value="" />
	<wcf:contextData name="storeId" data="${param.storeId}" />
	<wcf:contextData name="catalogId" data="${param.catalogId}" />
</wcf:getData>

Modify the <wcf:getData element to call the new extension search profile for navigation suggestions, x_IBM_findNavigationSuggestions. To do so, modify the following line of code, labeled 1, to include an x_ prefix:

<wcf:getData type="com.ibm.commerce.catalog.facade.datatypes.CatalogNavigationViewType" var="catalogNavigationView" 
expressionBuilder="getCatalogNavigationView" scope="request" varShowVerb="showCatalogNavigationView" scope="request">
	<wcf:param name="searchProfile" value="x_IBM_findNavigationSuggestions" /> 1
	<wcf:param name="categoryId" value="" />
	<wcf:contextData name="storeId" data="${param.storeId}" />
	<wcf:contextData name="catalogId" data="${param.catalogId}" />
</wcf:getData>

Add code to handle the URL for the warranty type navigation suggestion. This code controls what happens when the customer clicks a navigation suggestion for warranty types:

Locate the following block of code:

<c:otherwise>
   <c:set var = "urlValue" value = "#"/>
</c:otherwise>

Above this block of code, add the following lines of code:

<c:when test = "${suggestions.identifier == 'myID'}">
    <wcf:url var = "urlValue" value = "SearchDisplay">
        <wcf:param name = "langId" value = "${param.langId}"/>
        <wcf:param name = "storeId" value = "${param.storeId}"/>
        <wcf:param name = "catalogId" value = "${param.catalogId}"/>
        <wcf:param name = "sType" value = "SimpleSearch"/>
        <wcf:param name = "searchType" value = "0"/>
        <wcf:param name = "searchTerm" value = "${entry.name}"/>
        <wcf:param name = "searchTermScope" value = "100"/>
    </wcf:url>
</c:when>

Note: The preceding code sets the searchTermScope parameter value to 100. If you choose to specify a different parameter value, set a value greater than 100 to avoid potential conflict with future IBM releases.

Save and close the file.

Results

For your reference, the compressed file that you downloaded at the beginning of this tutorial contains a custom CachedHeaderDisplay.jsp file and a custom CachedSuggestions.jsp file with the changes in this lesson.