Facet or RefinementList Title

Open Q&A
#1

I’ve been searching all through the Algolia docs and code examples, and I can’t seem to find the answer to…

How do I provide the title for a “facet list”? For instance…if I have a “facet attribute” of “manufacturerName” (which is the indexed property name…but I want in the UI to display this facet grouping under the title “Manufacturer” … how do I do that?

#2

Hmm… I don’t see anything documented either! For my Autocomplete interface, I was able to create a header template, but I’m not sure if the refinementList widget support this template type. Here’s what it looks like for my autocomplete if you want to try it though:

        templates: {
          header({ items, state, Fragment }) {
            if (items.length === 0 || state.query === '') {
              return null;
            }

            return (
              <Fragment>
                <span className="aa-SourceHeaderTitle">
                  Sessions
                </span>
                <div className="aa-SourceHeaderLine" />
              </Fragment>
            );
          },
1 Like
#3

Yeah…I was hoping to create a dynamic UI based on the index data. In the React Hooks e-commerce example a specific Panel is created and wrapped around a Refinement list.

                <Panel header="Brands">
                  <RefinementList
                    attribute="brand"
                    searchable={true}
                    searchablePlaceholder="Search for brands…"
                  />
                </Panel>

Note that the facet property is brand while the “title” of that facet in the UI is “Brands”.

I was hoping to do something as simple as what’s in the NextJS example:

          <div>
            <DynamicWidgets fallbackComponent={FallbackComponent} />
          </div>

That just pre-renders all the facets I have defined in my Algolia dashboard, but as mentioned…it just defaults a title for each facet to be the indexed property name (which is not always a “user friendly” and properly capitalized name)