When you add an additional nesting level, all categories, including child categories, are displayed on the categories page

Bug
1

I have added another level of category nesting. But when adding subcategories to a child category, all these categories are displayed on the main page. I plan to create about 100 categories that should be displayed on the main page. There are 30-50 subcategories in each subcategory. Now all categories are displayed on one page. I didn’t find any settings for hiding the categories of the 2nd level of nesting on the main page.

You need to add the “show only child categories” setting so that the entire category tree is not displayed on the main page.
Otherwise, the categories of the second and third degree of nesting will always be displayed on the main page. And if there are thousands of them?

3 Likes
2

It’s generally considered a bad idea to have more than a couple hundred categories. Maybe have a look at It’s Time We Talked About Tags. The sub sub category feature is largely unsupported last I knew, but perhaps there’s a way to hide them as you wish.

2 Likes
3

Tags are not as structured as the category hierarchy. The subcategory function has been supported for a long time, it should be enabled separately. But the entire category tree is visible. For example, everything works correctly for nodebb. The page displays child subcategories, but does not display categories of a deeper level of nesting.

3 Likes
4

Has anyone solved this problem yet? @Johani , can you help me?

1 Like
5

What you’re looking for is decided based on a property called isGrandParent in the template here.

discourse/parent-category-row.hbs at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

When a category has grandchildren, we render the relevant markup for grandchild categories. Otherwise, we render the child categories.

The easiest way around this is to override that property in the parent-category-row ember component.

You can achieve that with the modifyClass plugin-api method.

Developer’s guide to Discourse Themes

modifyClass allows you to reopen the parent-category-row ember component class and add new methods.

To ensure those methods fire and the data is available, you’ll need to hook them to the didReceiveAttrs hook.

To do that, you can use the @on built-in decorator.

Once you have that all ready, you can simply override isGrandParent for all categories rendered via that component’s template and set them to false.

Here’s all of that put together

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  api.modifyClass("component:parent-category-row", {
    @on("didReceiveAttrs")
    removeGrandchildCategories() {
      this.category?.set("isGrandParent", false);
    }
  });
</script>

You add this to the header tab of your theme under common

This will cause the template to only render child categories and ignore grandchild categories.

You can use this same pattern to modify any property in any component.

2 Likes