Get category description and custom fields

Hello,
I’m turning a wp blog into frontity
The clients want to display the category description on top of the category page, and also to include there the menu of his choice
So I made a custom field where you can put the menu name
but IDK how to get this data:
the category description and the custom field

Hey @alexaspalato !

Are you using ACF or creating your own custom fields in Wordpress?

Have you have the field accessible via the rest API?

For my project I am using ACF along with ‘ACF to rest API’ wordpress plugin to ensure data can be accessed.

To get my acf data I am then doing something like:

  const data = state.source.get(state.router.link);
  const post = state.source[data.type][data.id];
  const contentBlocks = state.source.page[post.id].acf.content_blocks;

Where ‘content_blocks’ is the name of my field.

Hope this helps!

Hi @ben.wright.dev,
thank you.
Yes I use ACF, and I know how to use it
the problems is that this data is assign to the category
and IDK how to get the data from the category, neither native description, neither custom field

Hi @alexaspalato

Do you have a repo of this project that we can take a look at and clone?

Yes it’s here


thank you @mburridge

Hi!

I had quick look at this. Apparently the acf field is not exposed in the REST API right now, so I guess the solution for that would be in the ACF plugin.

Regarding the description field, this is a known issue with the WP REST API. You are probably getting the categories data as embedded from the latest posts list when loading the homepage and WP doesn’t include the category’s description when they are embedded.

You’ll see that if you get to the category page directly from SSR, the description field is populated in the state.

You can get the category again, fully populated with something like:

const Component = () => {
  useEffect(() => {
    actions.source.fetch('/:category', {force: true})
  }, []);

  return <div />
}

Docs: https://docs.frontity.org/api-reference-1/wordpress-source#source-fetch

I tried to had that in my archive component, and then the page loads, and quickly become blank
and no special error in the console
for ACF, I forgot to have the plugin acf to rest

Just to be sure, instead of /:category you need to pass the link of the category that needs the description populated. Is that how you are doing it?

@orballo, no I didn’t do that, I thought that :category was targeting all the categories as I need to do it for all categories, not for one
So I understand that first I need to get an array of all the categories archives links
I found another topic for this


I tried, but handlers is really a concept that I don’t get totally
so I did that, create a handlers folder in source,
create this

export const allCategoriesHandler = {
name: "allCategories",
priority: 10,
pattern: "/c/:slug",
func: async ({ route, params, state, libraries }) => {
const { api } = libraries.source;

//1.fetch data from the endpoint page
const response = await api.get({
  endpoint: "categories",
  params: {
    per_page: 100,
  },
});
//2.get 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, {
  items,
    });
  },
};

(the pattern thing is part of the things that I don’t really understand)
and then in index.js

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("all-categories");
      },
   },
  },
  libraries: {
    html2react: {
      processors: [image],
    },
    source: {
      handlers: [allCategoriesHandler],
    },
  },

But now if I type frontity.libraries.source.handlers it doesn’t appear in the list