Super Mega V2 menu for Opencart

Supermenu Item types

At this point in supermenu there are 9 types of items that can easyly be aded to the top menu, they are.

1. Category - with this item type you can add a category to the supermenu, and if this category has subcategories a dropdown will also be available
2. Information Link - simply display a link in the top menu to an information page
3. Information Dropdown - adds a menu item called information with a dropdown containing all the information pages
4. Custom link - adds a custom link to any page you want in the top menu with configurable name and url
5. Brands Dropdown - adds a menu item called brands with a dropdown containing all the brands in the store
6. More dropdown - displays a set of categories in the dropdown - you can set what categories in the settings tab at "categories from the more dropdown"
7. Products - display a menu item with latest / bestselleing / special / featured products
8. Categories with products - display a configurable number of latest products from a certain category
9. Login / Account dropdown - display a login dropdown if the customer is not lgged in or an account dropdown if the user is allready logged in

Adding items to supermenu

First edit the supermenu module to get to the module page if you havent allready. When supermenu page first opens, it opens in the items tab which is the tab where youll find your added items from now on.

To add an item to the supermenu simply click the add item button and a form with options will appear.

To remove a supermenu item click on the remove button of that item.

As said when clicking the add item button a row with options appear. It has 3 columns, the first one is for selecting the item type and its dropdown view style, the second column is for the item settings and the 3rd column contains the advanced settings for the added item.

The first column is straight forward, you select what type of item you are adding (category, custom link, info link etc) and the view style of the dropdown of that item (if it has a dropdown).

The second column content depends on what you selected in the first column at item type, if you selected category a category selector will appear so you can select the category to display, if you selected custom link 2 fields will appear for the custom link name and url, if you selected brands dropdown or info dropdown nothing additional will appear except for the dropdown banner option.

On the 3rd coumn there is a button that when clicked it expands a list with advanced settings for the item. the advanced settings contain:

1. Top link custom color - here you can set a custom color that will only apply to the edited item in the top menu
2. Top item custom class - you can add a custom class to the top item in case you need to customize somehow only the edited item in css (for advanced users)
3. Custom html dropdown - here you can set to display the contents of one of the 8 html areas from the Custom Html Areas tab, you can also set to display the custom html as the only content of the dropdown, display it only in the banner space area or display it above the categories/content of the dropdown
4. Subcategory levels displayed - by default supermenu displays up to 3rd level of categories in the dropdown, here you can also set to display only the second level or display no subcategories.
5. Dropdown width (px) - set a custom width for the dropdown of the edited item
6. Item width (px) - set a custom width for the items inside the dropdown
7. Stores - Select the stores in which you want the supermenu item to appear - usefull if you have a multistore setup, otherwise for a single store default will allways be selected. Tip: The supermenu item form doesnt have a status setting, and this is where this store setting can be very handy even in a single store setup, if you want to temporarily disable a supermenu item simply deselect default in the store list, to reenable it select default back on.
8. Manufacturers id - here you can input some manufacturer ids separated by comma and in the frontend the inserted brands will appear in a list on the right side of the dropdown

The +more dropdown

The more dropdown is a menu item that displays a configured group of categories. Originally it was intended to display a "more" dropdown with the rest of your shop categories that couldnt fit in the top menu.

You can add the more dropdown to the menu like any other item trough the add item button. But the content of the more dropdown must be set in the settings tab.

Click on the settings tab in the admin page of supermenu and on the right top you can see a selectbox with all the categories called "CATEGORIES FROM THE MORE DROPDOWN" , in there select the categories that you want to be displayed inside the more dropdown.

Still in the settings tab, in the "LANGUAGE RELATED" area you can also set a custom name for the more dropdown.

Dropdown display styles

In the first column when adding an item to the supermenu, for some item types you will see a setting called dropdown. There you cen set the display style of a dropdown, there are 4 available types:

1. Normal list - displays the items in the dropdowns a text links
2. Grid with images - displays the items in the dropdown as a grid with image for each item
3. Dropdown + Flyout list - displays a dropdown with the first level of subitems, then for each subitems that has its own subitems displays a flyout to the right on hover with it containing the sub-subitems as text links
4. Dropdown + Flyout Grid with images - displays a dropdown with the first level of subitems, then for each subitems that has its own subitems displays a flyout to the right on hover with it containing the sub-subitems as grid with images

For item types like category and more dropdown all display styles are available, for item types like brands dropdown ot products dropdown while all 4 options show up only the first 2 should be used because theese item types dont have sub-subitems so there would be no flyout. For items like custom link , info link or info dropdown the dropdown display selector does not appear as it is not needed. 

Supermenu Settings

The supermenu settings tab is split into 4 sections/areas:

1. General - Contains general settings related to supermenu > will be explained below
2. Categories from the more dropdown - this section was allready presented in the More dropdown chapter
3. Language Related - Here you can rename various words from the supermenu, it is also multilanguage, does not need further explanation , each setting tells you exactly what will be renamed
4. Customization - Here you can deply customize the look and colors of the supermenu, each customization setting has a name/explanatation and if you are not sure what it is for, you can just test it and see the result in the store.

General Settings:

1. Make Supermenu responsive - set to yes if you have a responsive theme or to no if your theme is not responsive
2.  Display item title in dropdown - set to yes if you want the item name to also be displayed as a title in the dropdown
3. Link to the top item - important setting - here you set where the link to the top item will be. By default   "View all button in bottom of dropdown"   is selected, which means that when the menu item has a dropdown instead of clicking the top item to go to its page, you click on the button from the dropdown (this option is so that dropdowns could be opened on touch screen devices easyer), but you also have the option to set it to "Top item has link" which means that when clicking the top item will go to its page and no button will be displayed in the dropdown. The 3rd option "Dropdown title has link" gives you the option that when displaying the item name as a dropdown tiltle it would also be a link and can be clicked/pushed to get to the item's page.
4. Display home icon link in menu - Gives you the option to display a home icon in the menu in a light or dark tone.
5. Default Flyout width (in px) - set a default width for the flyout - only efective on non-responsive mode because on the responsive mode the flyout resizes automatically
6. Dropdown Banner Space width - set a custom width for the dropdown banner space, applies to all dropdowns that have banners and the default size is 200px.
7. Subcategories limit - limit the number os 3rd level categories displayed in dropdowns, applies to all dropdowns
8. Item Image size(WxH) - set a custom size for the item images inside the dropdowns, applies to all dropdowns
9. Dropdown display effect - change the effect of the dropdown display
10. Use hoverIntent - Set if to use hoverintent or not (hoverintent is the plugin that delays the display of the dropdown untill the mouse cursor speed decreased enough over a top item - very usefull and prevents the annoying display of the dropdown each time you cross your mouse over the top menu)

Supermenu Customization

The supermenu features an enhanced set of customization options for colors, background, fonts and borders.

Each line has a name/explanation that tells you what that setting does.

The customization settings will only apply when you set "Apply the customization settings from below?" to yes.

If your theme has a custom font that you would also want supermenu to use put the name of the font in the input box of the "Supermenu font family" line.

Supermenu Tweaks

Change the displayed name of a top item category in the supermenu.

This can be usefull when you have a category with a long name and you want it to show a shorter name in the top menu.

How to: Add the category to the supermenu. Then edit that item and at item type select "Custom link" instead of category, then at custom link name insert the custom name you want for the category and then select back category at item type. The custom link name will then be saved in the dropdown and will be displayed as the category's name in supermenu.

Disable a supermenu item.

The supermenu items form does not have a on/off status setting for the items, but if you need to temporarily disable an item without deleting it, you can go in its advanced settings and at stores deselect the default store. To reenable the item later on, reselect the default store in the stores list.

Children Levels in the more dropdown

Supermenu displays up to 3rd level of subcategories

When item type is category: Level1: The category in top menu, Level2: The first level of subcategories in the dropdown, Level3: The subcategories of the categories inside the dropdown

When the item type is "More dropdown" the menu actually displays only 2 levels of categories, because Level1 Is the More dropdown menu item

However if you set the more dropdown to display as a dropdown + flyout, then it will display all 3 levels of categories, the Level1 will be the categories in dropdown, Level2 - the first categories in flyout and Level3 - the subcategories of the categories in flyout.

When adding a menu item (category or more dropdown) as dropdown + flyout make sure to add it trough the first items in the menu so there will be space to the right for the flyout to display (as the flyout allways opens to the right)

Add a youtube video in the banner space in dropdown

Go to youtube and get the code for embed video, paste the code in one of the html areas in source mode. Then edit the menu item you want and in its advanced settings at html are select the html area with the video and set it to display in the banner space.

Support

If after installation , you added items to the supermenu but the supermenu does not show up in your theme, and you followed the installation instructions corecltly and vqmod is installed but supermenu wont show up, contact me on email for support and also atach the file from your store catalog/view/theme/yourtheme/template/common/header.tpl to investigate the reason.Some themes have different structures and sometimes the supermenu.xml fails to apply the changes, in that case based on your theme's file a custom supermenu.xml will be provided. Please note that supermenu is a standalone menu and will not inherit your theme's menu style, it will look as it does in the demo or as you customize it.

That is about it, if I forgot something, or something is wrong , contact me at flo@shopencart.com

http://shopencart.com

Upgrade from previous version of supermenu

If You added code into the html areas in the previous version of supermenu, backup your html areas content before uploading the new files, as after the upload the html areas will be cleaned.

Upload the new files in the root of your site. Make sure to select overwrite if the ftp client asks you (this is so the old supermenu files will be overwritten by the new ones)

After uploading the new files the supermenu in frontend will disappear because the items you added before to supermenu are not set to the default store (this is because the multi store feature was added to supermenu), so you need to edit supermenu in admin , and for each adding item , go in its advanced settings and at store select the default store then save

Clear the browser cache so the new style of supermenu will be loaded in frontend

If after upgrade, in frontend the supermenu has errors, then it is still loading the supermenu.tpl from your custom theme, so you need to copy the supermenu.tpl from the default theme (catalog/view/theme/yourtheme/template/module/) overt to your theme in the module folder - this happens if when you first installed supermenu you copied its tpl file over to your theme, but now when uploading the new one, it uploaded directly to the default theme only.

If initially you installed the non-vqmod version of supermenu (you edited the header files your self) you will ned to update those file as per instructions from the "Install non-vqmod version" chapter.