Styling Facet Filters

I am using Bootstrap Material Design for the elements on my web page. Can I style the facets returned for filtering through a template like I can for the results of a search?

Definitely! I’m assuming you use InstantSearch, in that you can use a template for the header of the refinement list, the actual content and the footer.

const search = instantsearch(/* parameters */);

const widget = instantsearch.widgets.refinementList({ 
  container: "#list", 
  attributeName: "cars", 
  templates: {
    header: (count) => `${count} facets refined`,
    item: "#listtemplate", // or a function
    footer: "#listfooter", // or a function
  }, 
  //transformData to transform the data before displaying it
});

search.addWidget(widget);`

Don’t forget to also check out our renewed API Docs, they go into detail for cases like this.

Does that solve your question?

1 Like

yeah this was perfect. I seriously am in love with Algolia. I’m not much of a developer but I put this all together and now I’m trying to understand some of the smaller design things. This is great. Thank you for your time!!!

2 Likes

Thank you for the kind words!

Hi @haroen,

Is it possible to do a step further and completely remove the default ‘structure’ of the output?

For the refinementList they are all divs, and so many levels! (root, list, list–body, list–list, list–item… and thats not including the header or footer).

What I want it to output as is a simple unordered list.

<h3>Header for filter</h3>
<ul>
    <li><a href="./">Refinement 1</a></li>
    <li><a href="./">Refinement 2</a></li>
</ul>

Can I do this without having to make a custom widget?
I have no idea how to create custom widgets. I read the guide to custom widgets, but I am not a programmer so it makes no sense to me. I can follow tutorials step by step, but I don’t know much JS to be able to write a widget.

Thanks,
Emily.

Hey @Emily,

What exactly would your reason be to have that output instead? It should be possible with a custom widget close to this one: https://github.com/algolia/instantsearch.js/blob/develop/dev/app/vanilla/widgets/refinementList.js

or by editing this one https://github.com/algolia/instantsearch.js/blob/develop/dev/app/jquery/widgets/refinementList.js if you’re using jQuery

Does that help you?

Hi Haroen,

Thanks for the links - I will take a look and see how I go.

In terms of reasons, there are 2:

  1. semantic markup & convention
  2. Algolia search is being added to an existing website. To accommodate it’s multiple div structure, rather than ul li structure, I would also need to do a large rework of CSS. This can be done, but considering that semantic mark-up is preferable, I am exploring options for changing it to a ul li structure.

Thanks for your feedback, we are taking it in account when we ever can make the breaking changes in the DOM. Let us know if the example doesn’t work for you