SuiteCommerce Advanced: Add Tab Dropdown/Sub-Menu on Hover

The navigation tabs macro (navigation_tabs_macro.txt) has provisions for adding sub-tabs to facets used as navigational tabs. Adding a categories array object to a particular tab on the configuration.js file will produce sub-tabs for that tab.

Please refer below on how to set it on the configuration.js file:

1. Navigate to Setup > SuiteCommerce Advanced > Web Site Hosting Files.

2. Navigate to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. - Shopping > Custom ShopFlow > js > src > app.

3. Edit the Configuration.js.

4. Locate the section for the navigationTabs array:

// array of links to be added to the header // this can also contain subcategories navigationTabs: [ ... ]

5. On the object where the sub-tab/sub-menu will be added to, add a categories array object containing the sub-tabs/sub-menus.

Sample navigationTabs array object with sub-menus:

// array of links to be added to the header// this can also contain subcategories	...	, navigationTabs: [		{		  text: _('Home').translate()		, href: '/'		, data: {				touchpoint: 'home'			, 	hashtag: ''			}		, categories: [				{						text: _('Home Sub-menu 1').translate()					, 	href: '/submenu1'					, 	data: {								touchpoint: 'home'							, 	hashtag: '#submenu1'						}				}			, 	{					text: _('Home Sub-menu 2').translate()				, 	href: '/submenu2'				, 	data: {							touchpoint: 'home'						, 	hashtag: '#submenu2'					}				}		]	   }	,  {			text: _('Store').translate()		, 	href: '/search'		, 	data: {				touchpoint: 'home'			, 	hashtag: '#search'			}		}	]

6. Save the file.

7. Adjust the css alignment as needed. Refer to the css class below.

.dropdown-submenu>.dropdown-menu { ... }

8. Clear browser cache to view changes.