#community-help

Using Hierarchical Menu for Filtering in InstantSearch Vue Component

TLDR Sanjay needed help on filtering product data by hierarchy in InstantSearch Vue. Jason suggested using the hierarchical menu widget and provided the needed data format.

14mo

Join the chat

Aug 21, 2022 (14 months ago)

Photo of md5-09ffafb70fe5de5719d9e2002df44d61

Sanjay

10:16 AM

Hi, I am using instantsearch vue component in the frontend UI . 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:
Category Data:

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.

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

01:02 PM

You want to use the hierarchical menu widget: https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/vue/

01:03

Jason

01:03 PM

The data needs to be available in this format: https://github.com/typesense/typesense-instantsearch-adapter#hierarchicalmenu

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 2779 threads (79% resolved)

Join Our Community Manage subscription

Similar Threads

Filtering Issue with hierarchicalMenu Widget

Keith experienced a problem while filtering results using the `hierarchicalMenu` widget. They resolved it by using `filters: "break:true"` instead of `facetFilters`. Jason agreed with the solution.

6mo

Troubleshooting Typesense Setup and Understanding Facets and Keywords

Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.

19mo

Resolving Typesense Setup Issues with VueJS

A sought help with setting up Typesense in a CDN VueJS application. Jason guided him to adjust the initialization and provided a solution to an undefined item warning, resulting in a successful setup.

29mo