Getting refinementList with brands showing up

Open Q&A
#1

I’ve implemented indexing on the backend part and it looks like data are submitted to algolia propperly. Search also is basically working with customized template but now experience difficulties implementing refinementList for brands.

It’s implementend +/- the same as in the docs but “brand filters” are not showing up. A div is added in the #algolia-brand like <div class="ais-RefinementList ais-RefinementList--noRefinement"></div> but why is it empty?

Marke.Title is also added as Searchable attribute in Algolia but still no dice.

I’m using laravel mix (webpack 6) and have following packages installed:

  "dependencies": {
    "@algolia/client-search": "^4.12.1",
    "algoliasearch": "^4.12.1",
    "instantsearch.js": "^4.7.0"
  }

code looks like:

const algoliasearch = require('algoliasearch/lite');
const instantsearch = require('instantsearch.js').default;
import { searchBox, hits, refinementList } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'my_Index',
  numberLocale: 'de',
  searchClient: algoliasearch('********', '*********************************'),
});

search.addWidgets([

  searchBox({
    container: '#algolia-searchbox',
    placeholder: 'Suchen',
  }),


  hits({
    container: '#algolia-hits',
    templates: {
      item: `
    <article>
      <a href="{{ objectLink }}">
        <h1>{{#helpers.highlight}}{ "attribute": "objectTitle" }{{/helpers.highlight}}</h1>
        <img src="{{ AlgoliaThumb }}" alt="{{objectTitle}}" />
        <p>{{#helpers.highlight}}{ "attribute": "getDefaultOGDescription" }{{/helpers.highlight}}</p>
      </a>
    </article>`,
    },
  }),

  refinementList({
    container: '#algolia-brand',
    attribute: 'Marke.Title',
  })
]);

search.start();

I may experience Could not find a declaration file for module 'instantsearch.js/es/widgets' but not sure how to deal with the information provided there - looks like this info isn’t up2date anymore.

except above I could not spot anything on build nor on the browser console. What could be causing this? Am I importing the right packages or is there something else obviously wrong?

Thx for any pointers in advance! Lukas

#2

I’ve missed to configure Facets in the used index. By adding the needed fields under Configuration → Filtering and Faceting → Facets as “searchable” all stared to work :man_facepalming: