Customizations with VMI

3 min

Classic sites

Partners enabling VMI for the first time on Classic must check for any CSS, HTML, or Typescript customizations to OOTB modals. If so, they can find an existing modal that uses 100% OOTB functionality and interact with it to see if the modal is useable without any additional intervention.

The toggle for VMI/Storefront navigation menu is controlled via a cookie. Your partner must create a workflow for users to set this cookie if their frontend code obscures the OOTB VMI/Storefront toggle.

You can find an example of setting this cookie in the base code setMode function in insite.top-nav.controller.ts. If the base code layout for the HeaderView widget has been modified or if the HeaderView widget is using the B2C.cshtml template, your partner must implement a UX to toggle the cookie.

Spire sites

For VMI in Spire, the navigation main file is modules\content-library\src\Widgets\Header\MainNavigation.tsx.

If something is not working, check for these links:

vmiPageLinks: [  
    getPageLinkByPageType(state, "VmiDashboardPage"),  
    getPageLinkByPageType(state, "VmiLocationsPage"),  
    getPageLinkByPageType(state, "VmiUsersPage"),  
    getPageLinkByPageType(state, "VmiBinsPage"),  
    getPageLinkByPageType(state, "VmiReportingPage"),  
    getPageLinkByPageType(state, "VmiOrderHistoryPage"),  
],

Check that you have the correct value:

displayVmiNavigation:  
    currentMode === "Vmi" &&  
    orderSettings.vmiEnabled &&  
    isAuthenticated &&  
    session.userRoles?.toLowerCase().indexOf("vmi_admin") !== -1

Check that the current mode is being stored in a cookie:

export const NavigationModeCookieName = "NavigationMode";

Ensure that code with !displayVmiNavigation && and displayVmiNavigation && is being used 4 times (2 x 2), 2 times for mobile view (isCompactHeaderMainNavigation) and 2 times for desktop.