How do we add our own categories and brandlists to the refinementlists in reactjs instant search?

Hey there guys :slight_smile:
Where do we add our own refinement items, i.e. the demo has telephones, I need my blog categories. do we add them to our JSON file or is there a place on our dashboard where we add them?
thanks in advance
Linda

Hi @lindamacdonalde, The refinementList values come from the attributes on your records in your index. For example, if each of your records has an attribute for ‘brand’ with values such as ‘Apple’, ‘Samsung’, etc. Then you can add your ‘brand’ attribute to the ‘attributesForFaceting’ in your index configuration to create a facet. You can set the attributesForFaceting with an API client or in your dashboard configuration.

So, yes, initially these will be in the JSON file that you import to your dashboard. Or you can add the attributes manually in your dashboard by manually adding or updating records in an index.

Let me know if I’ve misunderstood your question.

1 Like

Thank you Cindy so much for your thorough answer. NOW i get it​:relaxed::relaxed::relaxed:

1 Like

Hi again Cindy :slight_smile:
I’ve managed to push my data into a brand new algolia index via the nodejs api. It as taken in all that I wished for so, so far so good :slight_smile: I would like to have the “category” into the refinement list but do I just write category in the frontent starter? eventhough the record is one json object?

each record is as follows:

{
“title”: “Norge Design - Et nytt digitalt felleskap for norske grundere med alt du trenger for å komme på nett”,
“description”: “Norge Design - Et digitalt felleskap for norske grundere med alt du trenger for å få success på nett. Grunderhjelp på en digital plattform? Valider ideen din med en gang. Kom på nett med en gang. Validering av en ide for å se om vi kan leve av ideen vår? Finn din målgruppe med virkelige tall fra virkelige besøkende”,
“category”: “digital markedsføring;Innovasjon;”,
“author”: “Linda MacDonald”,
“PublishDate”: “2021-02-09 14:41:31”,
“objectID”: “14946344000”
}

the algolia starter that I am using is this one:
https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch

Hi @lindamacdonalde, I have taken the sandbox and added the categories refinementlist here. In your own index, make sure that your category is set as an attributeForFaceting, then you can add it as a refinementList component as I’ve added the categories refinement list. Does that help?

1 Like

Thank you so much :slight_smile: everything running smoothly now. I am a newbie and on top of that blind as a bat because I had an error in my frontend too…I had written “category” and not "categories in my refinement list, but you sandbox helped me figure that one out too :slight_smile:

1 Like

hey there Cindy :slight_smile: I am fiddling with the layout of the react instantsearch starter and would like to add the refinement lists to the actual cards instead of having a sidebar, but is that actually doable? Like in the attached screenshot?

thanks in advance

Linda