Loading categories in the catalog browsing menu

You can override the behavior for loading the catalog browsing menu on individual store pages to control the display of the menu and improve the performance of loading store pages. By configuring the behavior for the catalog browsing menu, you can configure whether a store page loads only the top-level category in the catalog browsing menu when the page loads or loads all categories in the menu. The catalog browsing menu is a pop-up menu that includes a list of departments and categories.

About this task

To control the behavior of the menu on individual pages, you must first set the behavior of the menu for all store pages. To control this behavior for all store pages, you can configure the lazyLoadDepartmentsList variable in the EnvironmentSetup.jspf file for your store. For more information about this file and the variables that you can configure within the file, see Commonly used JSTL variables in starter store pages.

With the lazyLoadDepartmentsList variable, you can configure store pages to load only the top-level category in the catalog browsing menu upon the loading of a page. If you set pages to load only the top-level category, the remaining categories in the menu do not load until a shopper clicks the menu. By waiting to load the remaining categories upon the click action, you can improve the performance of loading the store pages during the initial page load. You can then override this setting for individual pages when you want to display the entire list of categories upon loading the store page. To override the setting on individual pages, use the overridelazyLoadDepartmentsList variable in the definition of a header wrapper for the individual store page.

For example, you can set the value for the lazyLoadDepartmentsList variable to true for your store, but override the setting for your home page with the overridelazyLoadDepartmentsList variable. With these settings, your home page displays the entire category list, but all other pages display only the top-level category and the performance of loading the pages can improve.

Procedure

Go to the directory of the JSP file that you want to update to override the display setting for the catalog browsing menu.
For example, if you want to update the home page for your store, go to the following directory:
- crs-web\WebContent\storedir\ShoppingArea\CatalogSection\CategorySubsection
Where store is the name of your storefront asset store directory. By default, this directory is AuroraStorefrontAssetStore.
Open the TopCategoriesDisplay.jsp file for editing.
Locate the code that defines a header wrapper for the page. If this code does not exist, add the following code within the <div id="page"> element for the page.
For example, in the TopCategoriesDisplay.jsp file, this code is included in the <div id="headerWrapper"> element:
```
<div id="page">
  <div id="headerWrapper">
    ...
  </div>
...
</div>	
```
Change the value for the overrideLazyLoadDepartmentsList variable to override the lazyLoadDepartmentsList variable setting for the store page. If the overrideLazyLoadDepartmentsList variable is not included in the file, add the code within the <div id="headerWrapper"> to include the variable:
```
  <c:set var="overrideLazyLoadDepartmentsList" value="true" scope="request"/>
  <%out.flush();%>
  <c:import url = "${env_jspStoreDir}Widgets/Header/Header.jsp">
  <c:param name="overrideLazyLoadDepartmentsList" value="${overrideLazyLoadDepartmentsList}" />
  </c:import>
  <%out.flush();%>
```
The values for the overrideLazyLoadDepartmentsList variable are:

true

Overrides the setting of the lazyLoadDepartmentsList variable for the store. By default the lazyLoadDepartmentsList variable is set to true for all store pages to load only the top-level category in the catalog browsing menu. By default, the value of the overrideLazyLoadDepartmentsList variable for the Aurora sample store home page is true to ensure that all departments and categories display in the menu for the page. If you change the value of the lazyLoadDepartmentsList variable for all store pages, you might need to change the value that is set for the overrideLazyLoadDepartmentsList variable on individual pages to no longer override the lazyLoadDepartmentsList variable setting.

false

The setting of the lazyLoadDepartmentsList variable continues to apply for the store page. This value is the default value of the overrideLazyLoadDepartmentsList variable for all store pages other than the Aurora home page is false.
Save and close the file.