In my shop I have multiple levels of nested categories (100s of categories with the same item available under multiple categories) for example:
-mens
-brand a
-tshirts
-style a
-short sleeve
-long sleeve
-style b
-jeans
-style a
-style b
-brand b
-tshirts
-style a
-style b
-jeans
-style a
-style b
-womens
-brand a
-tshirts
-style a
-style b
-jeans
-style a
-style b
-brand c
-tshirts
-style a
-short sleeve
-long sleeve
-style b
-jeans
-style a
-style b
-special offers
-mens
-brand a
-tshirts
-style a
-short sleeve
-long sleeve
-style b
-womens
-brand a
-tshirts
-style a
-style b
-jeans
-style a
-style b
As you can see in this example there is multiple categories with the same name and these can be nested at different levels with no set number of levels.
I had originally used a route like and used location.state to pass an id with navigation. I could then query my DB for that ID and it was simple enough.
However, we want to be able to re-use the url in the form of /category/special-offers/mens/brand-a/tshirts and display items based on this path rather than simply querying with an id.
I will probably still end up querying with an id but the question is what is the best way to ensure I have the right Id.
I have been looking at a route like
and then something like:
let { c1, c2, c3, c4, c5, c6, c7, c8, c9, c10 } = useParams();
let categoryTree = [c1, c2, c3, c4, c5, c6, c7, c8, c9, c10];
categoryTree = categoryTree.filter(elm => elm);
My DB structure at the moment has categories with a parent field, so like name, description, image, parentId. The top level categories would have a parentId of null.
Will I need to start at the top level category and query each category name with its parent so for /category/special-offers/mens/brand-a/tshirts i'd start with something like name:special-offers && parentId:null then when i get that Id name:mens && parentId:{Id from first query} and so on.
Or is there a better way to structure this?