The plugin you mention adds the custom fields data to the REST API response of the post type they are attached to. For example, if you add a custom field to post, let’s say, my-field, this custom field will be returned along with the post data when fetching a post.
As Frontity doesn’t modify the REST API response, the ACF info will be available in the same property it comes.
const data = state.source.get("/hello-world/");
const post = state.source[data.type][data.id]; // This is the REST API response
const myField = post.acf["my-field"]; // The ACF info is in the same place.
Everything sounds clear, the point is that the custom fields inside the Options page are usually available globally so you can access them from every page: I never directly fetch the Options page so that I can access its custom fields from it, that’s not even possible as far as I know.
I misunderstood your question, sorry. You are right, you cannot use actions.source.fetch directly to fetch the ACF options page as it isn’t a post type with a public URL pointing to it. However, you can already do that writing your own handler to accept some custom pattern to retrieve that data. Handlers are the piece of code that decide what must be requested from WP and stored in the Frontity state (more info on handlers here). It would be something like this:
// Fetch the `options` page (if it isn't fetched yet).
await actions.source.fetch("acf-options-page");
// Get the fetched data stored in state.
const data = state.source.get("acf-options-page");
// You will have in `data` something like:
// data = {
// isAcfOptionsPage: true,
// acf: { /* custom fields */ }
// }
I’m not sure if this would work in your case because ACF Options Page seems to be a per-pay feature and I haven’t tested it, but give it a try and let me know if it worked!
BTW, we are improving the design of how to fetch non-URL data from the REST API using actions.source.fetch (like your case), as there is some trouble (specially with error handling).
I don’t know if there are other endpoints like Options that need some custom code in order to get them.
Every other ACF custom field is added to the REST API response of the post type they are attached to, as David mentioned in his first post.
Options Page is a very popular addon for sure and it’s part of the PRO version of ACF. You should definitely take ACF into consideration while developing Frontity.
const marsTheme = {
name: "@frontity/mars-theme",
roots: { /* ... */ },
state: { /* ... */ },
actions: {
theme: {
beforeSSR: async ({ state, actions }) => {
// This will make Frontity wait until the ACF options
// page has been fetched and it is available
// using state.source.get("acf-options-page").
await actions.source.fetch("acf-options-page");
}
}
},
libraries: { /* ... */ },
};
I have already created one anther customHandler to fetch menu and Its already in the beforeSSR. Now I want to add handler for ACF fields. How can i add multiple fetches against beforeSSR by creating list against beforeSSR key in state.actions.theme.beforeSSR which is in the ./src/index.js?
can you please confirm? Thanks
Promise.all is a standard API of Promise, but there are lots of npm packages to do this in slightly different ways, doing races, using objects with keys, delaying the rejection until all them finished and so on.