Refinement list

Use this component to refine search results with facets.

Default configuration#

The Pagination component comes with:

Parameters#

• Refinement list parameters: This corresponds to the refinementList widget provided by Algolia.

There are no default configurations for Slots or Variants. Learn more about configuring components.

Add to a composition#

When you add the Refinement List component to a composition, you will need to configure the parameter to bring in data from the Algolia search index.

1. Click the "Edit Value" button in the Parameters section.

   

2. Select the appropriate index from the list provided.

3. Select the attribute of the index on which you want to refine results from the list provided.

4. Choose "and" or "or" in the Operator field for how you wish facets to be combined.

   • 'or': Returns results matching any of the selected values
   • 'and': Returns results matching all selected values

5. Enter the number of facets that should be retrieved in the Limit field. The default value is 10. When you set showMore and showMoreLimit, this is the number of facet values to display before clicking the Show more button.

6. Enter the maximum number of items to display (if the widget is showing more items) in the Show More Limit field.

7. Enter the text that appears in the search field in the Searchable Placeholder field. For example, "Search our products."

8. Toggle each of the following on and off as desired for your experience:

   • Show More: Whether to display a button that expands the number of items
   • Searchable: Whether to add a search input to let users search for more facet values
   • Escape Facet Values: Escapes the content of the facet values returned by Algolia.

9. Click the red "Save" button to save your changes to the composition.

You can add additional components within the Widgets slot provided.