Get facets with React frontend from the Dashboard

I want to loop through every facet that I have entered in the dashboard and show them in that order in the UI. But I can’t find a function for that. Some help please?

I was facing this issue as well. If their order is not to be completely dynamic (i.e. it will change depending on query context), then just set it with the RenderingContent option (if you want to do it prorammatically):

You can also set it in the Algolia UI inside the “Facet Display” section of the index configuration.

If you want to set it dynamically, it looks like you can do this also, via the Merchandising configuration options: Merchandising Facets | Algolia

I believe that part of the magic of Algolia has to do with pre-indexing data. So unlike SQL systems, where the sort happens on demand, Algolia doesn’t really have that option. I have been playing with the new Dynamic Widgets feature, which gives you a lot more control over the UI display while still having access to the dynamic faceting features of instant search. However, even with that, it isn’t really possible to alter the sort order of items easily without using the methods I described above. I think the tradeoff here is query performance for sort flexibility in the end.

I don’t really care that much for the order tbh, first and foremost I want to render the facets. That’s what I want initially. How do I do that?

There are a bunch of different ways to do that. The easiest is using the React InstantSearch library.
InstantSearch | React InstantSearch | Algolia

Part of the “magic” of Algolia is the ability to drill-down on multiple facets to get to a result. This would be a somewhat complicated thing to build on your own, and the InstantSearch library supports it out of the box. So I would use that first. Algolia’s docs need some work, but you should be able to get it going without too much trouble if you are a programmer with some JS experience.

Yeah, I’ve been reading through all documentation and I can’t for the life of me find how to solve this.

I just want a simple function that retrieves the renderingContent object.

They somewhat cover this here, but nowhere do they outline how to fetch renderingContent

I don’t think that renderingContent does what you think it does. It just tells you the current settings for the index for how the content should be rendered (i.e. sort alphabetical, or by hit count). Basically, if you don’t use instantsearch, you can use the renderingContent object to follow the current settings on the index and render the content yourself using those settings.

I think you should really spin up an example project in React using instantsearch:

It’s really going to help you understand this better I think.

index
  .setSettings({
    renderingContent: {
      facetOrdering: {
        facets: {
          order: ['brand', 'size', 'color'],
        },
        values: {
          brand: {
            order: ['Uniqlo'],
            sortRemainingBy: 'alpha',
          },
          size: {
            order: ['S', 'M', 'L', 'XL'],
            sortRemainingBy: 'hidden',
          },
        },
      },
    },
  })
  .then(() => {
    // done
  });

The thing is I have a project up and running. I know how to render different facets with React Instantsearch.

I ran the index.setSettings() function, added a bunch of attributes to attributesForFaceting… So it’s all there in “back-end”… Now I want to fetch all the facets from the front-end and display them.

The Github project I linked to should help you to query your index and display search results and facets.

If you’re only looking to query facets, you could use the Search for Facet Values API: Search for Facet Values API Reference | Algolia and then just loop through them yourself.

Maybe it would be helpful if you explained what you’re trying to build in more detail. I feel like we’re only getting part of the story here and it’s hard to make recommendations because I don’t really understand what you’re trying to do.

Sorry, english is not my first language, but I don’t know how else to word it.

Simply put: I don’t want to hard code which facets to show and which attributes to query.
I want to look which attributes that was configured in the back-end and then render them accordingly.

I just want to display the facets that I have configured in the Algolia dashboard.


But since I will have many different indices and they’ll all have different names and amount of traits it won’t make sense to “hard code” a bunch of facets. So I want to render them according to the dashboard. Does it make sense?

So I’'ll tell you what I told you before. The React InstantSearch library has dynamic facet support built in. When you enter a search term into the search box, the facets will dynamically show/hide based on your search term. If you choose one facet that excludes the possibility of selecting other facets, those facets will disappear also. This is all stock functionality for the React InstantSearch library. So you just need to do what I told you. Go get the example React InstantSearch project from Github, install it on your computer or server, and then start using the demo dataset to understand how the faceting functions work. Then, once you get that far, you can come back and we can have a more informed discussion about exactly what you want to do.

The fact that you’re talking about “hard coding” the facets tells me that you don’t understand how the InstantSearch library works and therefore are missing a big piece of the puzzle right now.

Ok, I have the ecommerce demo running now. Now how do I get all the refinements that are in the backend?

Post your code to a Gist and I will help you add widgets.

Can I contact you on Discord or something? Thanks