Hi @SantosGuillamot:
I am trying to create the handler for my WP menus using WP-Rest API. The plugin that you have suggested in your reply is not able to retrieve menus as they have applied permission checks. So I am using another plugin to access the menus and the endpoint is:
My Staging Siteās WP-API menu endpoint
And I followed your guide to create a custom handler like that but I think Itās not fetching menu from the above endpoint, although itās returning the menus.
Custom Handler that I have created:
const menuHandler = {
name: "menus",
priority: 10,
pattern: "menus/:id",
func: async ({ route, params, state, libraries }) => {
const { api } = libraries.source;
const { id } = params;
// 1. fetch the data you want from the endpoint page
const response = await api.get({
endpoint: "/wp-api-menus/v2/",
params: {
menus: id,
per_page: 100 // To make sure you fetch all the elements
}
});
// 2. get an array with each item in json format
const items = await response.json();
// 3. add data to source
const currentPageData = state.source.data[route];
Object.assign(currentPageData, {
id,
items,
isMenu: true
});
}
};
My index.js fileās code is:
import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import processors from "./components/styles/processors";
// import { theme } from "@chakra-ui/core";
const menuHandler = {
name: "menus",
priority: 10,
pattern: "menus/:id",
func: async ({ route, params, state, libraries }) => {
const { api } = libraries.source;
const { id } = params;
// 1. fetch the data you want from the endpoint page
const response = await api.get({
endpoint: "/wp-api-menus/v2/",
params: {
menus: id,
per_page: 100 // To make sure you fetch all the elements
}
});
// 2. get an array with each item in json format
const items = await response.json();
// 3. add data to source
const currentPageData = state.source.data[route];
Object.assign(currentPageData, {
id,
items,
isMenu: true
});
}
};
const chakraTheme = {
name: "frontity-chakra-theme",
roots: {
// In Frontity, any package can add React components to the site.
// We use roots for that, scoped to the "theme" namespace.
theme: Theme
},
state: {
// State is where the packages store their default settings and other
// relevant state. It is scoped to the "theme" namespace.
theme: {
/**
* The logo can be a text or an image url
* logo : "Frontity"
* logo: "https://uploads-ssl.webflow.com/5be00771820599586e6bd032/5be0223588110a6dbcac2d05_image.svg",
*/
logo: "Frontity",
showBackgroundPattern: true,
showSocialLinks: true,
/**
* socialLinks: [
["pinterest", "https://www.pinterest.com/frontity/"],
["facebook", "https://www.instagram.com/frontity/"],
["twitter", "https://www.twitter.com/frontity/"]
],
*/
socialLinks: [],
menu: [],
featured: {
showOnArchive: false,
showOnPost: true
},
colors: {
primary: {
50: "#e9f5f2",
100: "#d4dcd9",
200: "#bbc3be",
300: "#a1aba5",
400: "#87938b",
500: "#6d7972",
600: "#555f58",
700: "#323c34",
800: "#232924",
900: "#272727"
},
accent: {
50: "#ede4d3",
100: "#fbe3b2",
200: "#f6d086",
300: "#f1be58",
400: "#eca419",
500: "#d49212",
600: "#a5710b",
700: "#775105",
800: "#483100",
900: "#1d0f00"
}
},
isSearchModalOpen: false,
isMobileMenuOpen: false,
autoPreFetch: "all"
}
},
// Actions are functions that modify the state or deal with other parts of
// Frontity like libraries.
actions: {
theme: {
openMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = true;
},
closeMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = false;
},
openSearchModal: ({ state }) => {
state.theme.isSearchModalOpen = true;
},
closeSearchModal: ({ state }) => {
state.theme.isSearchModalOpen = false;
},
beforeSSR: ({ actions }) => async () => {
await actions.source.fetch("menus/2");
}
}
},
libraries: {
source: {
handlers: [menuHandler]
},
html2react: {
// Add a processor to html2react so it processes the <img> tags
// inside the content HTML. You can add your own processors too.
processors: [image, ...processors]
}
}
};
export default chakraTheme;
, please let us know if you find more cases not covered here.
: