Extracting October Static Pages MainMenu items for a Vue.js app

Question

For building a Vue menu in October, I have the following code in a backend plugin. It is working fine to get the Static Pages pages in a JSON data, keeping the pages items indentation :

$theme = \Cms\Classes\Theme::getEditTheme();
$pageList = new \RainLab\Pages\Classes\PageList($theme);
$treePageList = $pageList->getPageTree(true);

Now I would like to extract the October "RainLab Static Pages / Menus / Mainmenu" items, keeping the menu items indentation. (In my backend plugin).

Thanks for any idea about how to get these menu items ?

You can create your own plugin and call static pages' menu component. Turn that information to a json() response. — Pettis Brandon, Jun 22 '20 at 23:55
Thanks Pettis, bu I already created a plugin for that. My question was about how to "query" the static pages component ? — Incremental, Jun 23 '20 at 07:51

Hardik Satasiya · Answer 1 · 2020-06-25T07:40:00.773

2

You could add static-menu component and ajax-handler on your layout file to handle ajax request.

Your need to add staticMenu with proper menu selected

Now in handler code

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

Ajax request

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

and you can have your menu in response

if you want to look full tutorial with images please checkout here Static Page Menu Ajax Tutorial

if any doubt please comment.

edited Jun 25 '20 at 07:40

answered Jun 23 '20 at 06:55

Hardik Satasiya

9,547
3
22
40

Thanks Hardik for this fine answer. I modified my post to clarify, but I would like to run it in my backend plugin. Do I need Ajax request, or is it for a frontend request ? – Incremental Jun 23 '20 at 07:49
means you just need to query it or you need to query it by ajax – Hardik Satasiya Jun 23 '20 at 08:04
1

@Incremental can you check this may be this can help you : https://tutorialmeta.com/blog/post/how-to-get-static-page-menu-items-using-ajax#5 – Hardik Satasiya Jun 23 '20 at 08:26

score 0 · Accepted Answer · answered Jun 27 '20 at 00:01

Thanks Hardik Satasiya, I solved it with the following code :

if(class_exists('\\Rainlab\\Pages\\Classes\\Menu')) {
    $theme = \Cms\Classes\Theme::getActiveTheme();
    $menus = \RainLab\Pages\Classes\Menu::listInTheme($theme, 'mainmenu');
    $menu_full = json_decode($menus);

    return getRecursiveMenu($menus);
}

function getRecursiveMenu($menus) {
    static $level = 0;
    static $next_level = 0;
    $menuDetails = [];
    foreach($menus as $iMenu) {
        $detail = [];
        if ($level == $next_level) {
            $detail['menu_name'] = ['name' => $iMenu->name];
        } else
            $detail['menu_name'] = ['title' => $iMenu->title, 'url' => $iMenu->reference];

        $level++;
        $items = getRecursiveMenu($iMenu->items);

        if(count($items) > 0 ) {
            $detail['menu_items'] = $items;
        }
        $menuDetails[] = $detail;
        $next_level++;
    }
    return $menuDetails;
}

Thanks for your help !

sure mate , i am glad it helped you :) – Hardik Satasiya Jun 27 '20 at 05:29 — Hardik Satasiya, Jun 27 '20 at 05:29

Extracting October Static Pages MainMenu items for a Vue.js app

2 Answers2