How to modify CSS classes in Hits widget using Moustache?

Hi!

Per the docs, it’s possible to override CSS classes for the hits widget, like so:

instantsearch.widgets.hits({
  // ...
  cssClasses: {
    root: 'MyCustomHits',
    list: ['MyCustomHitsList', 'MyCustomHitsList--subclass'],
  },
});

I was wondering if it’s possible to use Mustache to conditionally add CSS classes?

Here’s an example of what I’d like to do:

instantsearch.widgets.hits({
  // ...
  cssClasses: {
    root: '{{#myHighlight}}myConditionalCSS{{/myHighlight}}',
    list: [
           'MyCustomHitsList', 
           'MyCustomHitsList--subclass',
           '{{#myHighlight}}myConditionalCSS{{/myHighlight}}'
          ],
  },
});

Thank you!

Hi there,
Thanks for reaching out to us.

Unfortunately the cssClasses only accept plain string, not templates.
Can you give us an example on what kind of condition you’d like to have?

We might be able to provide you a workaround for your case.

1 Like