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.
Related Questions
- → OctoberCMS Backend Loging Hash Error
- → "failed to open stream" error when executing "migrate:make"
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → Create plugin that makes objects from model in back-end
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → How to install console for plugin development in October CMS
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS