Jun 23

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.

To install Static Pages Plugin from command line you can use below command.
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

some-pages

Now lets add Menu

full-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

add-component-to-layout

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

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

add-ajax--handler-to-layout

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.

Calling our Ajax handler using OctoberCMS Ajax-Api
$.request('onGetMenu', {
    success: function (data) {
      console.log(data);
    }
});

working-demo

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.

To get available menu codes
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);
To get particular Menu items
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.

multiple-menu

Ajax handlers code
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.

Ad
Ad