Is there a way to combine Hits with Hierarchical menu?

[gyto]

I scavenger a lot of forums and documentations in instant search and I still cannot figure it out how to combine hierarchical menu with products I am actually getting from hits.

The idea behind the hierarchical menu to contain a minimum price and and category image in that particular category from existing index. Almost like using custom db group by query. Without using already predefined prices or images. I want dynamically pull the information from entire search engine. Due to my server speed I cannot afford table distinct every time someone visiting website. So I idea behind this was to use instant search as widget that gives categories and information I need on particular category.

I am just wondering if this even possible to do with custom widget of hierarchical menu by extending or connecting it to more custom widget. honestly to build custom widget is really confusing for me even after going over docs. It’s still gives me question how correctly to use functions to pull info I need from it.

Thanks

[Haroenv]

Do you have an image of the UI you want to create, or maybe a snippet of the expected data? I'm not sure I understand the goal.

[gyto]

@Haroenv Something like this. This is pretty common usage to make categories visible with images

[Haroenv]

Visually this looks quite similar to the experience in https://www.algolia.com/doc/guides/solutions/ecommerce/browse/product-carousels/static-product-carousels/, but I don't see what that has to do with a hierarchical menu. Does that help you?

[gyto]

Yes, it's true, it looks a lot similar to the above image, but it doesn't help. but looks like I don't have a choice to use 2 instances of instant search on one page. Because I don't want to affect the user experience in instant search when they filter the products and make changes to their query. Configure can only be used per instance, so if I distinct the product categories.

My goal is to retrieve a minimum price of the given category which is based on the visible category for you, the same as the image. Something like this in prisma:

await prisma.produtcs.groupBy({
  by: ["category"],
  select: {
    category: true,
    price: true,
    thumb: true
  },
  orderBy: [
    { price: "asc" },
  ]
})

This is just an example. but I think I can manage to filter the product by their minimum price in a separate instance with configure option.