Reference My Account: Insert Image on Main Navigation Menu Items

Note: Applicable only for Reference My Account v1.01 Bundle ID 36478

This article will guide users on how to insert image on the Main Navigation Menu Items for Reference My Account


Sample Menu with image.

Requirements:

1. Copy the js folder file from Reference My Account folder to Custom My Account Folder.
2. Copy the layout.txt file from Reference My Account folder to Custom My Account > Templates Folder
3. Refer to the Help Center article "Deploying SSP Application Touch Points" for the steps on how to deploy the Custom Checkout SSP Application.

1. Upload all images to img folder.
   1. Navigate to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. - My Account > Custom My Account > img
   
   
2. Update Menu Items Module.
   
   - By default, every Menu Item Module has the following elements: id, name, url and index. Add another element that will call the URL for the image you want to appear on the navigation menu item.
   
   
   1. Navigate to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. - My Account > Custom My Account > js > src > app > modules
   2. Edit the .js file for the Menu item module.
      
      

      Overview	Profile.js
      Profile Information	Profile.js
      Address Book	Address.js
      Credit Card	CreditCard.js
      Order History & Returns	OrderHistory.js
      Email Preferences	Profile.js
      Reorder Items	OrderItem.js
      Update Your Password	Profile.js

      
      
   3. Add another element that will call the image URL saved on the image folder.
      - For this article, we will call the element image
      
      image: 'https://system.na1.netsuite.com/c.TSTDRVXXXXXX/SSP Applications/NetSuite Inc. - My Account/Custom My Account/img/address-book-icon.png'
      
      Sample declaration taken from Address.js
      MenuItems: { id: 'addressbook' , name: _('Address Book').translate() , url: '/addressbook' , index: 1 , image: 'https://system.netsuite.com/c.TSTDRVXXXXXX/SSP Applications/NetSuite Inc. - My Account/Custom My Account/img/address-book-icon.png' , }
      Note:
      - To retrive the image's URL, edit the image file from the img folder and use the URL with 'https'.
      
      
   4. Apply the above steps to the remaining Menu Items.
   
   
3. Insert the image element to the menu
   
   - The final step is to call the image element to the layout.
   
   1. Navigate to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. - My Account > Custom My Account > templates
   2. Edit layout.txt
   3. Insert the code
      <img src="<%= item.image%>">
      
      Sample declaration:
      - this declaration will display the image before the item name.
      <li data-label="<%= item.id %>"> <a href="<%= item.url %>" target="<%= item.target %>"> <img src="<%= item.image%>"> <%= item.name %> </a></li>