Cookbook - Storefront Navigation

1 Introduction

This cookbook describes issues that may occur with the different possible navigations of the Intershop storefront (Responsive Starter Store or Progressive Web App (PWA)).

Responsive Starter Store Main Navigation Hover

2 Recipe: Disable the Main Navigation Menu Hover (Responsive Starter Store)

2.1 Problem

The subcategories hover menu of the main navigation should be disabled so that only the main navigation catalogs are shown. Any navigation to subcategories should only be possible by clicking an item of the main navigation and further clicks through the category hierarchy.

2.2 Solution (From ICM 7.10.35.0 or ICM 7.10.32.6-LTS)

Starting with ICM versions 7.10.35.0 (a_responsive 29.0.0) or 7.10.32.6-LTS (a_responsive 26.1.4) the main navigation subcategories depth can be controlled via the CMS in the Backoffice.

The Main Navigation (Full) component provides a new configuration parameter Maximum Subcategory Depth that can be set to 0 to completely disable any subcategory navigation in the main menu. The alternative Main Navigation Category component provides this configuration value as well.

Main Navigation (Full) component

Alternatively this behavior can be controlled via ISML in the template /default/inc/navigation/SimpleNavigationBarIndex.isml where the parameter MaxSubCategoriesDepth can be set.

Note

Starting from the mentioned ICM versions, the default value for MaxSubCategoriesDepth is set to 0, so the main navigation hover menu is disabled by default.

SimpleNavigationBarIndex.isml
<isset name="MaxSubCategoriesDepth" value="#0#" scope="request"/>

2.3 Solution (Older ICM Versions)

Previous versions of ICM do not provide the possibility to control the main navigation subcategories depth via CMS.

Also disabling the subcategories navigation via MaxSubCategoriesDepth does not work as expected since the 0 value is not handled correctly.

This functionality could easily be added by applying the changes introduced with ICM 7.10.35.0 (a_responsive 29.0.0).

The patches to a_responsive are provided as attachments:


If the control via CMS is not necessary but the hover menu should be disabled anyways, a simple quick fix would be to adapt the CategoryNavigationIndex.isml. Specifically the ISSubCategoriesIndex that renders the hover menu has to be removed.

3 Recipe: Disable the Main Navigation Menu Hover (Intershop PWA)

3.1 Problem

The subcategories hover menu of the main navigation should be disabled so that only the main navigation catalogs are shown. Any navigation to subcategories should only be possible by clicking an item of the main navigation and further clicks through the category hierarchy.

3.2 Solution (PWA 1.1)

Starting with PWA version 1.1 the main navigation subcategories depth can be disabled via the environment.ts property mainNavigationMaxSubCategoriesDepth by setting the value to 0.

mainNavigationMaxSubCategoriesDepth: 0,

3.3 Solution (Older PWA Versions)

Using the mainNavigationMaxSubCategoriesDepth property to completely disable the main navigation hover menu does not work in older PWA versions. This functionality could easily be added by applying the changes introduced with the pull request fix: mainNavigationMaxSubCategoriesDepth configuration with '0' fails to disable main navigation hover menu.

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Tickets