Further enhancing the user's experience while browsing products on the Commerce portal is the option to visualise products in relation to equipment or other sub-components, using the Visual Product Finder. Hotspots can be created on images, with products assigned to these clickable areas.

(See "Navigation via Visual Product Finder" for more information)

Note: This feature only works for products with 'Classification = Product​' (i.e. not applicable for product with 'Classification = Consumables' or 'Classification = Spare Parts').

Uploading images and Starting the Editor

Product images can be uploaded and managed in the system. (See "Product Master Pre-Requisites" for more information)

The setup of the Visual Product Finder for uploaded 2D images can be done in 'Products' > (select the product to be edited) > 'Attachments': 

Clicking the button under the 'Interactive' column would prompt a pop-up with the Visual Product Finder editor, for product hotspots to be set up. 

The sequence of visible product images on the Visual Product Finder page can be set in 'Products' > (select the product to be edited) > 'General Information' > 'Product Images': , where the 'Main Product Image' is shown first, followed by the rest in numerical order. (See "Product Master Pre-Requisites" for more information) 

Note: If the Visual Product Finder editor icon is not available, it may be that the computer display used is touch-enabled. Please open the browser’s developer tools, go to the respective JavaScript console and enter the following:  >functionisMobile(){return false} . Reload the page and the icon should be available after. 

Creating Hotspots and Assigning Products

Within the Visual Product Finder editor, hotspots can be created and defined by clicking on the '+' icon, followed by the location on the image for the hotspot to be placed. Pointers may be extended to hotspots for increased visibility. Both hotspots and pointers can be repositioned by dragging and dropping the respective elements, or even deleted if desired. 

Identified hotspots are listed on the right-side of the screen, and can be assigned to products or sub-components accordingly. 

Assigned products will show as listed on the Visual Product Finder in the Commerce portal, if products have been set up to be visible (See "Product Master Pre-Requisites" for more information): 

Creating Hotspots and Assigning Products in bulk

Often, products have numerous spare parts to be identified in the Visual Product Finder. Rather than a simple image, complicated drawings may be used for identification of multiple components and spare parts, making manual set up of individual hotspots impractical. 

A speedy setup of the Visual Product Finder, and simplified maintenance of hotspots and product assignments on spare part drawings, can be accomplished using an excel-based upload within the Visual Product Finder editor. An empty template to be filled in may first be downloaded from here: 

Most CAD systems generate an SVG file that contains an image with coordinates of hotspots and product information. This information can be parsed and filled into the excel template. 

First, the X and Y coordinates of the hotspots and its pointers may be indicated in the respective columns. Taking the length and height of the image, together with the exact coordinates of each point, the columns are filled with these coordinates defined are as a percentage of the image dimensions: 

The mapping of products to these coordinates can be done using any of the following 4 options: 

1. Product Name
2. ERP ID
3. CRM ID
4. BOM Name & BOM Position

As there may be more than one Bill-of-Material (BOM), both the BOM Name and Position ID are needed together to identify the unique product. 

While any one of the above 4 options may be filled to identify the product, if more than one is filled, all information in the same row must point to the same product. If there are any inconsistencies, the row would be skipped in the upload and a notification message will indicate this error: "Fields need to be configured/formatted as text/string to be uploaded successfully."

After a successful upload, the system will have generated hotspots corresponding to the rows provided in excel, together with the products assigned. These hotspots can be repositioned directly in the Visual Product Finder editor (if required): 

Assigned products will show as listed on the Visual Product Finder in the Commerce portal, if products have been set up to be visible (See "Product Master Pre-Requisites" for more information): 

Note: For automating this implementation via API, the SVG needs to be parsed. The flow will be to call API to upload the image, create excel, and call another API to upload excel for the uploaded image.