Account Overview Menu Customization in SuiteCommerce

The My Account application in SuiteCommerce includes a dynamic menu that provides access to various features based on user permissions. Understanding how this menu operates is crucial for customizing user experiences effectively.

How Does the Menu Work?

The menu structure appears in two locations: the sidebar and the application header. It dynamically tailors itself to display only those features a user has permission to access, which is primarily determined by their assigned roles within NetSuite. For instance, if a user lacks permission to access Order History, the corresponding link will not be displayed in their menu.

Header Menu

The menu in the application header is defined through the header_menu_myaccount.tpl template. Each menu item includes a data-permissions attribute to control its visibility. The template checks user permissions against this attribute to determine if the link should be displayed. For example:

<a class="header-menu-myaccount-anchor-level3" href="#" data-touchpoint="customercenter" data-hashtag="#returns" data-permissions="transactions.tranFind.1,transactions.tranRtnAuth.1" name="returns">
   {{translate 'Returns'}}
   </a>

Account Overview Menu

The Account Overview menu is generated automatically upon loading the My Account application. Each application module that features a menu item returns a MenuItems object. Here’s an example snippet from a Quote.js file defining a menu item:

1MenuItems: {
2         parent: 'orders',
3         id: 'quotes',
4         name: _('Quotes').translate(),
5         url: 'quotes',
6         index: 5,
7         permission: 'transactions.tranFind.1,transactions.tranEstimate.1'
8}

Once all modules are loaded, the SC.MyAccount module's MyAccount.on method collects these menu items into an array for rendering in the interface.

Handling Forbidden Access

Despite the automatic enforcement of permissions, users might attempt to access prohibited features. The ErrorManagement.ForbiddenError.View module displays a standard error message:

Sorry! You have no permission to view this page. Please contact the website administrator, click here to continue.

This message can be customized to align with your web store branding and communication style.

Who This Affects

• Administrators: Responsible for setting permissions and customizing the menu.
• Developers: Implement the menu logic and customize templates.
• Content Managers: Ensure user-facing messages reflect the intended user experience.

Key Takeaways

• The Account Overview menu adapts based on user permissions and roles.
• The header menu uses specific HTML attributes to manage visibility.
• Custom error messages can enhance user experience when permissions are denied.