Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Subcategories

default discord avatar
digimortal_2 years ago
5

Moving over from

#967097582721572937

where it was recommended to use a

parent

field to the

categories

collection, which is a

relation

to the collection itself to add subcategories. While this would work, it would be quite confusing within the UI itself, right, as editors would not be easily able to determine which are subcategories and which top-level categories they belong to (from the main collection screen).

  • discord user avatar
    jarrod_not_jared
    2 years ago

    You could either add another field to denote the type (top-level/sub) or create an entirely different collection for sub categories. Both would be fine approaches.

  • default discord avatar
    gaurav00342 years ago

    i have same problem I am using payloadcms and in collection of posts I have


    {


    name: "category",


    type: "relationship",


    relationTo: "categories",


    required:true


    }, this category field , now I want to include subcategories field but it should show subcategories only from array which is present in selected category



    I have subcategories collection from that collection only I am currently getting subcategories using relationship but now I want subcategories according to selection of category can you please help or guide with this



    My question is i have collection categories and collection subctegories, in categories collection i added subcategories throughe relationship, so while creating any post i need that my subcategories should populate in option depending upon selection of cetegory.But i am not able to do that so please help me with that

  • default discord avatar
    salman16532412 months ago

    Hello have you able to solve it?

  • default discord avatar
    reepicheep0512 months ago

    I did something like this.



    {
            name: "category",
            type: "relationship",
            relationTo: "categories",
            hasMany: false,
            admin: {
              position: "sidebar",
            },
          },
          {
            name: "subcategory",
            label: "Sub-Category",
            type: "relationship",
            relationTo: "subcategories",
            hasMany: false,
            filterOptions: (props: any) => {
              const { relationTo, siblingData } = props;
              return {
                parent: {
                  in: siblingData.category,
                },
              };
            },
            admin: {
              position: "sidebar",
              condition: (_, siblingData) => {
                if (siblingData.category) return true;
              },
            },
          }


    The subcategory field only shows if a category is selected.



    The subcategory dropdown populates with only subcategories of the selected category.

  • default discord avatar
    salman16532411 months ago

    Thanks a lot for your suggestion. I will look into it. Sorry for the late reply. Our gov turned off internet for 5 days to control the rising protest.



    I have used another solution. I like it's flexibility. I have created a field in the category collection called parent and tied it up with the same category collection using relationTo.



    import { CollectionConfig } from "payload/types";



    export type SubCategory = {


    name: string;


    };



    export type Category = {


    name: string;


    mockupSubCategories: SubCategory[];


    };



    const MockupCategories: CollectionConfig = {


    slug: "mockupCategories",


    labels: {


    singular: "Mockup Category",


    plural: "Mockup Categories",


    },


    admin: {


    useAsTitle: "name", // Use the name field as the title


    },


    fields: [


    {


    name: "name",


    type: "text",


    required: true,


    },


    {


    name: "parent",


    type: "relationship",


    relationTo: "mockupCategories",


    hasMany: false,


    },


    {


    name: "level",


    type: "number",


    label: "Category Level",


    required: false,


    },


    ],


    };



    export default MockupCategories;

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.