Installation


Before installing the extension, please make sure to Backup your web directory and store database


You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.

Root Directory is - "app/code/magedelight/#YourExtensionName#"

  • Unzip the extension package file into the root folder of your Magento 2 installation.
  • Connect to SSH console of your server:
    • Navigate to the root folder of your Magento 2 setup

    • Run command as per below sequence,

      php bin/magento setup:upgrade

      php bin/magento setup:di:compile

      php bin/magento setup:static-content:deploy

      php bin/magento cache:clean

  • log out from the backend and log in again


If you are using Magento 2.3 or later then you do not need to activate license. Extension will be activated with silent activation mechanism and does not require activation keys to be entered manually.   


Backend Configuration (Admin side)

  1. Enable Mega menu: Enable/disable the mega menu extension.
  2. Enable Hamburger Menu For Categories: Select "Yes" to enable Hamburger Menu.
  3. Select Primary Menu: Selected primary menu would get displayed at the place of default menu of Magento store (this will override the default menu).
  4. Animation Time: Enter time in seconds for all animation type selected for each mega menu.



  1. Enable Logs: Logs keep details of errors (if anything goes wrong while creating menu or menu items then details of error would be displayed under logs).

    Logs is meant for developers only.

Import Sample Data

Mega Menu >> Sample Import

  • Click on Import button, if you want to import sample data for Mega Menu.

Backend Functionality

Manage Mega menu

In Magento admin, Select Mega menu tab (from side panel) which will display all the menus created from Mega menu extension.

  • Title: Name of the menu.
  • Menu Type: There are two types of menu.
    • Mega menu
    • Normal menu
  • Status: Status for a particular menu. Only enabled menu will be shown in the frontend.
  • Store View: Store view shows the stores selected for a particular menu. Means that menu will only be visible in the store for which it is selected.
  • Created: Displays the date when menu is created.
  • Modified: Displays the date when menu is modified.

Create New Menu

  • Enable Menu: Enable/disable the menu.
  • Menu Title: Set the menu title.
  • Menu Style: This is a text area field which saves the in page CSS. It will be applicable only to Mega menu type menu. This is very useful if someone wants modification in mega menu style without editing any core files.
  • Customer Groups: Allow selected customer groups to access the mega menu.
  • Menu Type: There are two types of menu.
    • Mega menu (has various configuration options)
    • Normal menu (is similar to default Magento menu)
  • Menu Design Type: Select design type from available options.
    • Horizontal Menu
    • Vertical Left
    • Vertical Right
    • Drilldown (each menu item can be expanded and collapsed)
  • Is Sticky: Enable to scroll down menu with page scroll.
  • Store View: Multiple stores can be selected from here. The menu will be displayed in that particular menu. If default is selected the menu can be displayed in all the stores.

  • Shortcode: Value of the field would get generated automatically on saving the menu. Place the generated code in CMS page or static block to display created menu.

    Except primary menu, shortcode is required for all menus to get displayed on the frontend. Hence, copy and paste the shortcode of desired menu in the CMS page or static blocks where you want to display the menu.

Menu Item

After saving menu, one more tab (“Menu Item”) will be displayed beside “Menu” which is used to create Menu items. Menu items can be created in 4 different ways.

  1. Mega Menu Block: When we add menu items in mega menu block and click on add to menu, it creates a menu item as shown below. This option will be only enabled when current menu type is mega menu.

    The options specified in menu block are as follows.

    • Label: It displays label name for menu item.
    • Class: Add multiple classes to menu items on front end.
    • Preceding Label Content: This option is used to add content before menu item on frontend. This is basically used to add font awesome icons. We can add font awesome icon code here.
    • Menu Columns: There are maximum 5 columns supported now which is used to create columns from menu items for mega menu.
    • Multiple Columns: This columns will appear after you will select menu columns from drop down menu. This contains static blocks and normal menus.. When we select any static block from the column that static block will get rendered on the frontend for the menu and same will appear for normal menus.

    • Show Title: This option enables us to show hide title of normal menu (selected as menu items) on the frontend.

      Show Title is used only when menu is selected for menu column. It is not meant for static block option for menu column.

  2. Category Block: This option shows Magento Categories.

    • Class: Add multiple classes to menu items on front end.
    • Preceding Label Content: This option is used to add content before menu item on frontend. This is basically used to add font awesome icons. We can add font awesome icon code here.

  3. Page selection: This option shows pages in Magento store.

    • Class: Add multiple classes to menu items on front end.
    • Preceding Label Content: This option is used to add content before menu item on frontend. This is basically used to add font awesome icons. We can add font awesome icon code here.

  4. External Links: This option adds external links to the mega menu.

    • Label: It displays label name for menu item.
    • URL: Enter URL of external page where item click should redirect the users.
    • Class: Add multiple classes to menu items on front end.
    • Preceding Label Content: This option is used to add content before menu item on frontend. This is basically used to add font awesome icons. We can add font awesome icon code here.


Click on categories from the dynamically displayed list with all sub categories. You can select which category to display in the mega menu. You can set customized class, preceding content, animation effects. It also provides you facility to set image at different places of menu block.

  • Class: Add multiple classes to menu items on front end.
  • Preceding Label Content: This option is used to add content before menu item on frontend. This is basically used to add font awesome icons. We can add font awesome icon code here.
  • Animation Fields: Select animation effect for menu
  • Block: Select block to display at header, left, right and bottom of the category menu

Hamburger Menu

Calatog >> Categories >> Select sub-category >> Mega Menu (For Desktop Only)

  • Number of Columns with Subcategories: Provide number of column to be displayed with sub-categories.
  • Text Color (hex):

Steps To Add a Mega Menu

  1. Enable Mega Menu:
    • Navigate to MageDelight > Mega Menu > Configuration.
    • Set Enable Menu to Yes.
    • Click Save Configuration to apply the changes.

  2. Create a New Mega Menu:
    • Go to MageDelight > Mega Menu > Manage Menu.
    • Click on Add New Menu.
    • Select Create Mega Menu and fill in the required details.
    • Choose your desired Mega Menu Style:
      • Horizontal Menu with Icons
      • Horizontal Menu with Vertical Columns (Category)
      • Horizontal Menu with Horizontal Category Blocks
      • Vertical Left Mega Menu
      • Vertical Right Mega Menu
      • All Category Menu - Full View
      • All Category Menu - Child Nesting View
      • Hamburger Menu Style with Open Fold
      • Hamburger Menu Style with Sub Folds
      • Drill Down Menu
    • Click Save and Continue Edit.

  3. Add Menu Items:
    • In the menu editing interface, click on Add Menu Items.
    • Select the desired Category Items and Mega Menu Block.
    • Click to add the selected items to the menu.
    • Click Save to confirm the additions.

  4. Set Primary Menu:
    • Navigate to MageDelight > Mega Menu > Configuration.
    • In the Select Primary Menu section, choose the newly created Mega Menu.
    • Click Save Configuration to finalize the setup.


Frontend Functionality

  1. Menu with 4 columns (4th column displays products with images, add to cart, favorite and compare icons)

  2. Menu with 1 column

  3. Menu with 4 columns (4th column displays product image with associated URL)


  4. Menu with one column (it displays video which can be played in menu itself)


  5. Vertical right menu


  6. Vertical left menu 


Demo

Click here to visit frontend.

Click here to visit backend admin panel.

GraphQL

query GetMegaMenu {

    getMegaMenuById(id: 1) {

        menu {

            ...MenuData

            menu_items {                

                ...MenuCategoryList

                childrens {

                    ...MenuCategoryList

                    childrens {

                        ...MenuCategoryList

                        __typename

                    }

                    __typename

                }

                __typename

            }

        }

    }

}

fragment MenuCategoryList on MenuItems {

    item_id

    item_name

    item_type

    object_id

    item_link    

    item_columns {

        item_rows {

            type

            value

        }       

    }

}

fragment MenuData on MenuData {    

    is_active    

    menu_id

    menu_name

    menu_type    

}

FAQs

Click here to visit FAQs.

Support

Click here to raise a support ticket using your MageDelight account.

Additional Services

Click here to get the customized solution for this extension.


Thank you for choosing MageDelight!


  • No labels
© 2024 MageDelight. All Rights Reserved. MageDelight.com is an initiative by Krish TechnoLabs.