Navigation Menu Component
Synopsis
The Navigation Menu Component is a Starter Store component based on the Essentials Menu Component: it mainly offers a category driven navigation menu directing users to category and product detail pages.
Component Overview
The Navigation Menu Component (referred in the Starter Store as Category Menu component) is mainly responsible for fetching external categories information. This component is entirely based on the Essentials Menu component: the main idea is to control a menu object with the related items. A menu item can be linked to a category decorator document: in this specific case, external category details are automatically fetched.
Menu items can also link to other types of documents, like product decorator documents, article pages etc.
Menus can have multiple levels and those will be correctly rendered in the front-end. If a menu item contains a child, this will be visible when the cursor hovers over the parent item.
Component Details
The Navigation Menu Component is a command chain delivery component. The connector component used is the categoriesList: it is defined for both the connectors, Bloomreach and commercetools.
The commands used are initContextCommand and hstMenuCommand. The second command has been implemented specifically for this component: it is based on the more abstract ContentDecoratorCommand. For each item linked to a decorator document, this command will perform an external request to fetch external item details.
As an example, suppose you created a menu consisting of two items, a category decorator document linked to a Bloomreach category and another one to a commercetools category. For each of those menu item the HstMenuCommand will perform an external call retrieving information like sub categories. As shown in the screenshot below, sub categories will be displayed accordingly:
The screenshot above shows, among others, two top categories: Cookware linked to a commercetools category and Furniture linked to a Bloomreach Discovery category. The items below the Furniture category are fetched automatically and are not part of the menu definition.
Template Details
Starter Store Boot application ships two standard templates working with the Navigation component:
- starterstore-menu.ftl, supporting basic menu rendering
- starterstore-categories-menu.ftl, supporting multi levels menu item.