How to achieve hierarchial filter in facets in typesense

Question

I am using vue instantsearch component in the frontend UI with typesense. I have a particular use case to achieve. Please guide me how that could be achieved. I have a product data and hierarchical category. I have already achieved normal search by facets such as category , brand, price and rating. However my requirment is as:

Clothes
      ->Mens Clothing
         -> Tshirt
         -> Pant
      -> Womens Clothing
         -> Tops
         -> Ladies pant

Taking the example of above hierarchal category. I would like filter the product by category. eg. (Mens Clothing) then I would only like to see Tshirt and Pant in the category facets ie the children categories of Mens Clothing only. Let me know How can I achieve such.

Answer 1

You want to use the ais-hierarchical-menu widget.

Make sure that you structure the data in Typesense as described in this section for the widget to work.

The browse by categories widget on this page is an example implementation of this widget.