Purpose of Module
The Icon Manager module allows the store administrator to define any number of flags or icons that can be associated with products, such as "new", "cool", "staff pick", or more website specific uses. If desired, an icon can be associated with a URL so that when a customer clicks on the icon, his browser is directed to the new page - either within the same window or as a popup.
Once an icon has been defined, it may be assigned to one or more products. Global settings allow flags to be displayed on the category, product, search results, and/or product list screens.
Icon Manager is fully template-compatible, supporting templating systems such as OpenUI SuperMod, Dynamic Templates, Category and Product Page Templates, and OpenDesigner. All Icon Manager output is XHTML compliant.
How to Install
- Installing the Module
- Unzip the module's ZIP file to your hard drive
- Log into your Miva admin utility
- Expand the navigation tree next to Modules
- Click the link "Add Module"
- Click the "Upload File" graphic
- Click the "Browse" button
- Browse to the location where you stored the contents of the ZIP file
- Select nbiconmgr.mv(c)
- Click the "Upload" button
- When the graphic has been uploaded, the small "Upload File" window will disappear, leaving you with the main Miva admin screen visible
- Click the "Add" button on the main Miva admin screen
- Repeat the above process for the import file, nbiconmgrimpt.mv(c)
- Associating the Modules with a Store
- Log into your Miva admin utility
- Expand the navigation tree next to Stores
- Expand the navigation tree next to the store with which you wish to associate this module
- Click the "Utilities" linkunder the store (the top-most Utilities entry)
- In the list of modules, you should see an entry for NetBlazon's Icon Manager. Check the box next to this module and then click the Update button.
- Above the list of modules should be a new link labelled "Icon Manager". Click this link.
- Enter your license key and click the "Update" button
Administrator Interface - Global Settings
To access the module's administration screens, click the Utilities link under your store. Then, on the right side, click the link labelled "Icon Manager". Under the licensing information are two subtabs labelled "Global Settings" and "Icon Definitions". Global Settings is the default selected subtab.
The Global Settings subtab allows you to define locations where icons will be displayed on each of the four supported Miva Merchant screens: Product (PROD), Category (CTGY), Search (SRCH), and Product List (PLST). To suppress display on a given page, select "No Display or Token Use Only". Otherwise, select one of the supported locations for the desired screens. (For token and template use, refer to the section Template and Token Support.
Administrator Interface - Icon Definitions
To define your store's icons, click the "Icon Definitions" subtab. This screen lists all currently defined icons in your store.
To create a new icon, click the "New" link on the far right side of the navy blue bar. This will take you to a new screen where you can upload the icon image and set the parameters for the new icon. To edit an existing icon, click the "Edit" link on the right side for a given icon. By default, icons are displayed for a product in the order shown on this screen. To reorder the icons, click the up and down arrows to swap any two icons. (When used with templating systems, icons can be displayed individually; in this case, the order within Merchant admin is not important. All icons can also be displayed with a single token; the order is important in this case. For token and template use, refer to the section Template and Token Support.
The settings for an icon are as follows:
- Description: the description field is only visible within the module's admin and is for your reference only. It is meant to be a helpful way to identify icons. The description field is displayed when assigning icons to products.
- Icon File: the icon file is the physical file of the image to be used for the icon. You may upload a new graphic file by clicking the round "Upload File" button to the right of the field. Alternatively, you may type in the path and filename of a graphic already on your website's filesystem. Several icons are provided with the module and may be used freely within your store.
- Icon Alt Text: this text is placed in the "alt" attribute of the "img" tag that is displayed for the icon. Many browsers display the alt text as a "tooltip" when the mouse is placed over the image. The alt text is also recommended for accessibility and search engine optimization.
- Image Width: the width in pixels of the icon file.
- Image Height: the height in pixels of the icon file.
- Display on Product Screen?: check this box to indicate that the flag should be displayed on the product screen.
- Display on Category Screen?: check this box to indicate that the flag should be displayed on the category screen.
- Display on Search Screen?: check this box to indicate that the flag should be displayed on the search screen.
- Display on Product List Screen?: check this box to indicate that the flag should be displayed on the product list screen.
- Link to URL: (optional) The URL to which the icon should be linked. If blank, the icon will not be clickable.
- Link Attributes: (optional) If a Link to URL is specified, this field allows you to place
optional attributes on the anchor tag (<a>) that surrounds the <img> tag. Examples include:
target="blank"
onclick="javascript:popupWindow(this);"
etc.
If specifying JavaScript functions, these functions will need to be defined separately on your Miva Merchant-generated pages. This is often done within OpenUI by specifying the function definitions in the HeadTag Insert.
Administrator Interface - Assigning Icons to a Product
To assign icons to a particular product, go to Products in Miva Merchant admin and search or browse for a particular product. Click the edit button to edit the product's data. On this screen, there will be a tab (link) above the product fields labelled "Icon Manager". Click this link to display the Icon Manager product screen.
This screen lists all icons defined for the store. To assign one or more icons to this product, check the box next to the given icon in the column labelled "Assigned?". (You may quickly check or uncheck all icons by clicking the check images at the top of this column.) Click the "Update" button to save your settings.
Using Icon Manager with Templating Systems
Icon Manager provides several OpenTokens for use with various templating systems. The OpenTokens provided are:
- showicons_prod: Show all flags assigned to this product that are configured to be displayed on the product screen. The order is dependent upon the ordering of icons as defined within the module's admin screens.
- showicons_ctgy: Show all flags assigned to this product that are configured to be displayed on the category screen. The order is dependent upon the ordering of icons as defined within the module's admin screens.
- showicons_srch: Show all flags assigned to this product that are configured to be displayed on the search screen. The order is dependent upon the ordering of icons as defined within the module's admin screens.
- showicons_plst: Show all flags assigned to this product that are configured to be displayed on the product list screen. The order is dependent upon the ordering of icons as defined within the module's admin screens.
- showicons_all: Show all flags assigned to this product for any screen. I.e. if an icon is assigned to the product for any of the following: product, category, search, or product list screens, then this icon will be displayed. The order is dependent upon the ordering of icons as defined within the module's admin screens.
- showicon~id: Show a single specific flag, if assigned to the product. The flag to be displayed is specified after the "~" character. This value should be the numeric value from the "ID" column as shown within the module's admin screen on the "Icon Definitions" subtab. For instance, to show the icon that has an ID of 4, the token should be "showicon~4".
Before tokens can be used in most templating systems, Icon Manager must be registered as a third-party token. This is done in different locations depending on which templating system is in use. To register Icon Manager as a third-party OpenToken, log into Miva Merchant, click the triangle next to Stores, and then click the name of your store. Then on the right side, click the OpenUI Tokens link. Next, click the round "New" button. For module code, enter "NBICONMGR" (without the quotes), and for token, also enter "NBICONMGR" (without the quotes). To register Icon Manager as a third-party token with other templating sytems, please refer to those systems' documentation for instructions.
Now, within your templates, you can reference Icon Manager's tokens in the following manner:
(For Product and Category Page Templates, make sure to add an extra pipe as shown:
The string after the last pipe ("|") character should be replaced with the appropriate token from the list above.