You might have an Odoo store and ample amount of visitors that visit your e-store everyday. Now, let’s say you sell hundreds of products on your store. And the menu on your website is not categorized. Wouldn’t it make difficult for your customers to traverse around your website? If your answer to the question is “yes”, you need a tool that helps you to categorize your menu and make it look grand.
The developers at Biztech have created Advance Mega Menu App which helps website owners to create mega menu on their website frontend. Using it, you can change your simple menu into an attractive mega menu. And the best part? It is easy to customize. You can rename the menu name the way you want to. These mega menus can be assigned at the website category level so you can have categories as mega menu with sub categories. Which helps to filter products based on categories.
It has some easy steps for configurations in back end. Admin can make all these configurations to manage website.
Take a look at the image at the end of this page to know about the following path:
biztech_website_mega menu/static/description/mega menu_configs.jpg
You can create Mega Menu by following the steps given below:
- Go to Website Admin -> Settings -> Configuration -> Pages.
- You will find an option to add Mega Menu.
- Once you set that and it will start behaving as Mega Menu for your website.
- You can define the Mega Menu and Type in the configuration.
- It can be for Category Mega Menu, List Category Mega Menu, Page Mega Menu. All the three Menu types will be displayed differently.
● Category Mega Menu will get displayed category wise.
● List Category Mega Menu will get displayed listing wise.
● Page Mega Menu will get displayed page wise.
- Add slider of categories on Home Page
- Provide the name of Category Slider
- Select the positioning of the slider. E.g. Left or Right
- There is an option wherein you can select static image instead of slider.
- Upload the static image to be displayed on the homepage.
- Select the no of columns that need to be displayed on Mega Menu. There is an option for selecting out of 2, 3 and 4 columns. You can choose a column that helps you to manage the UI of mega menu and website.
- For Mega Menu and sub menus, you can also set background image
- Choose the background color of your choice
- Set menu icon for Mega Menu
- Add footer in Mega Menu
In website categories, you can add any website category to Mega Menu, which will create sub-menus of Mega Menu. If you add parent category as Mega Menu, it wouldn’t add all child categories automatically. You can also select which sub/child categories you want to add in Mega Menu.
Some categories might not be used for any products which also will display on the website. You need to exclude such categories manually; which increases the efforts of the end user. So, it is better to provide option on any level category for adding in Mega Menu or not. You can have the option to provide sequence to display categories with priority.
We have followed a technical standard to implement this app.
Js and css files of Mega Menu have been added in biztech_website_megamenu/views/template.xml file as per the Odoo standard Odoo 11.
<?xml version=”1.0″ encoding=”utf-8″?>
<odoo>
<template id=”assets_frontend” inherit_id=”website.assets_frontend” name=”Website assets”>
<xpath expr=”.” position=”inside”>
<link href=”/biztech_website_Mega Menu/static/src/css/style.css” rel=”stylesheet”/>
<script src=”/biztech_website_Mega Menu/static/src/js/custom.js” type=”text/javascript”/>
</xpath>
</template>
</odoo>
We have created template for Mega Menu in biztech_website_megamenu/views/template.xml file,
We have inherited template of website.submenu and created template of Website Mega Menu.
<template id=”website_Mega Menu_submenu” inherit_id=”website.submenu”>
</template>
You can create any template like the one mentioned above.
We have created website Menu in this app, so that you can see the website menus from website settings easily.
Go through the image biztech_website_megamenu/static/description/megamenu.jpg given at the end of the page
We have inherited model class website.menu and product.public.category to define fields; which is created in biztech_website_megamenu/models folder in respected model file.
Description of Advance Mega Menu App is defined with images in
biztech_website_megamenu/static/description
Below is the folder structure of Advance Mega Menu App :
