How to get static menu items using ajax

Some time we need to show menu but reqirement is to make it dynamic as well. at first it looks little complex but its really easy with Static Page Plugin : Static Menu component.

We can easily add multiple menus and its really easy to edit, add and update items using Static Pages Plugin.

let's dive into tutorial

Static Pages Plugin : Static Menu component

first of all you need to install Static Pages Plugin. you can checkout our how to install plugin tutorial to insatll plugin.

php artisan plugin:install RainLab.Pages

now lets add some pages to static page plugin and create menu

1. Adding menu

First we added some pages so we can add it to static menu

Now lets add Menu

2. Adding Static Menu component to layout file

We are adding it directly into our layout file so it is available through out entire website

3. Adding our ajax-call handler in to layout file

We are also adding it directly into our layout file so it is available through out entire website

function onGetMenu() {
    $menuItems = $this['staticMenu']->menuItems();
    return Response::json(['mainMenu' => $menuItems]);
}

4. Calling Ajax-request to our ajax handler

Now we are ready to call our newly created ajax handler to get menu data in json format.

$.request('onGetMenu', {
    success: function (data) {
      console.log(data);
    }
});

5. Advanced usecase if you wan to use code in backend

If you plan to use it in backend you can use specified code to get items and then you can convert it to array or json as per your need.

use CmsClassesTheme;
use RainLabPagesClassesMenu as PagesMenu;

// .. other code

$theme = Theme::getEditTheme();
$menus = PagesMenu::listInTheme($theme, true);
$menuCodes = [];
foreach ($menus as $menu) {
    $menuCodes[$menu->code] = $menu->name;
}
dd($menuCodes);

use CmsClassesTheme;
use RainLabPagesClassesMenu as PagesMenu;

// .. other code

$theme = Theme::getActiveTheme();
$menu = PagesMenu::loadCached($theme, 'main-menu');

// need to pass this dummy page to tell there is no active item
$dummyPageObj = json_decode('{"activeMenuItem":""}');

$menuItems = $menu->generateReferences($dummyPageObj);
dd($menuItems);

6. Bonus mutliple menu handling

You can add multiple menus to the layout and respective handler to get mulitple menu's items.

function onGetMenu() {
    $menuItems = $this['staticMenu']->menuItems();
    return Response::json(['mainMenu' => $menuItems]);
}

function onGetUserMenu() {
    $menuItems = $this['userMenu']->menuItems();
    return Response::json(['userMenu' => $menuItems]);
}

Don't you think its really easy and very convenient way of handling your ajax menus.