Customers need to be able to navigate around a storefront. SmartEdit allows non-technical users to manage website links to allow users to find different areas of the webstore. These links can be embedded in three places, called navigation components:
- The category navigation component at the top,
- The footer navigation component at the bottom,
- The account navigation component, but its visibility is limited to logged-in users.
Laura can conveniently manage the website's navigation links on her own. She uses SmartEdit to define a hierarchical structure of CMS navigation menu items and entries. Each navigation component on the page provides the navigation nodes, their entries, and links that customers use to navigate through the website.
Note
The term "navigation component" refers to two different things in WCMS. To clarify: Laura can manage website links, which are also called "navigation components" and are found in menu entries inside a menu item.
The term can also refer to menu items exposed by our three main navigation components in the storefront: Footer, Category, and Account.
Editing Navigation Components
The navigation node will determine where on the page the new menu item will appear. Laura can add, edit, move, and delete menu items. A menu item can have one or more entries or refer to other menu items.
Note
Multiple menu entries can be associated with one menu item. Entries themselves are invisible to the storefront user. However, these entries contain two types of visible navigation components that customers can use to navigate the storefront.
A link component can then be created and assigned to an entry. The link component determines what happens when a user clicks the containing menu entry. The link title specified in its corresponding menu entry is the link name that is displayed in the storefront afterward.
Out of the box, a link can direct users to a:
- Content page
- Product page
- Category page
- Specific URL, either external or internal
- A simple or responsive banner component could also be used.
Navigation Components on the Storefront
The following images illustrate how the navigational menu items and entries are handled in SmartEdit and also how they are presented on the storefront after synchronization.
We’ll start off with the storefront Category Navigation component on the left side of the next image. On the right, you’ll see its representation in SmartEdit with the corresponding six top-level menu items. The name of each menu item, highlighted with a colored background, is visible on the storefront.
Now let’s have a look at the storefront Footer Navigation component at the top of the next image. Below, you’ll see its representation in SmartEdit, along with the corresponding three top-level menu items. These entries themselves are invisible, but they contain and expose visible links as navigational components that end users can see on the storefront.
Now, let’s have a look at the last of our three out-of-the-box navigation components, the Account Navigation component. This component is only visible to logged-in users.
On the left-hand side of the next image, you’ll see the Account Navigation component on the storefront. And on the right side, you’ll see its representation in SmartEdit with just one top-level menu item. The menu item is open and contains several menu entries. Each of these entries exposes a visible link. So, in fact, what the logged-in user sees on the storefront is the link. The entry itself, as always, stays invisible.
Note
You might experience further out-of-the-box navigation components in recent SAP Commerce Cloud releases to navigate quick orders or for customer support, for example. But the general management approach remains the same as you already learned.
Please see these concepts of navigation in the following video: