How to list sub categories in category page?

I want to show list of sub-categories in the category page.

How is it possible to do it in Frontity?

I thought it might be in “state.source.category[categoryID]”, but it wasnt there.

Is it possible in frontitty?
Can anyone answer my question?

Hi @mymakarim

I don’t think this is going to be easy to do. If you go to the console and look in frontity.state.source.category you’ll see that the parent category is not available for each category.

However, if you open https://yoursite.com/wp-json/wp/v2/categories in your browser or in Postman you’ll see that in the returned JSON that the parent category is available:

image

I’ll refer this to our dev team to see if they know of a way to do this.

Check out this thread which may guide you towards a solution.

Unfortunately it did not help!
This “showing subcategories in category page” is an essential part of many applications. It is necessary to focus on this issue ASAP.

I really need Frontity team’s help ASAP!

Hi @mymakarim

Here’s another related thread that you might find useful.

There’s also a repo that you can take a look at.

That’s because the resource embedded in the post is not exactly https://yoursite.com/wp-json/wp/v2/categories but https://yoursite.com/wp-json/wp/v2/categories?context=embed which doesn’t include the parent.

For example:

This is by design. They considered parent to not be important enough to be included in the embed.

It’s quite arbitrary, to be honest :sweat:

any progress on the topic?
Can you please suggest me any way possible to get sub categories of category in category page?

I think you have to fetch the categories endpoint using parent=id as a param to retrieve all its subcategories: https://developer.wordpress.org/rest-api/reference/categories/#arguments

If you need to do so with SSR support, you have to replace the category handler for your own and add an additional fetch for the subcategories once you know the ID of the parent.

I used useEffect and useState, but there is a problem


    const [cat, setCat] = useState([]);

    useEffect(() => {
        async function fetchMyAPI() {
          let response = await fetch('https://codenawis.com/componentity/wp-json/wp/v2/categories?parent='+data.id);
          response = await response.json();
          setCat(response);
        }
        
        fetchMyAPI()
      });

When I first come to category page it shows the subcategories (Fine) https://componentity.com/category/tailwindcss/
I click on one of the posts and navigate to a single blog post page. But when I return to the category page it does not render useEffect!

Never mind!

It works :grinning: :grinning:

1 Like