Algolia Search

Refinement List

The RefinementList component gives a list of attributes to filter by.

Refinement Configuration

For filters / faceting attributes, settings need to be configured in the Algolia Dashboard before they can be utilized in the frontend.

<h2 className="my-3 text-2xl">Filter by Category</h2>
<RefinementList attribute="category" />
<h2 className="my-3 text-2xl">Filter by Manufacturer</h2>
<RefinementList attribute="manufacturer" />
<h2 className="my-3 text-2xl">Filter by Model</h2>
<RefinementList attribute="model" />jsx

Import the RefinementList component & give the attribute you configured for the attribute prop.

Customize Refinement Lists

This example uses the transformItems option to filter out the defaultRefinement for Used Equipment

<RefinementList
	attribute="taxonomies.product_cat"
	transformItems={(items) =>
		items.filter((item) => item.label !== "Pre-Owned")
	}
/>

Sort By

The SortBy component must be configured in the Algolia backend by duplicating indices and adjusting the relevance priority.

<SortBy
	defaultRefinement="bka_used_equipment"
	items={[
		{
			value: "bka_used_price_desc",
			label: "Price High to Low"
		},
		{ value: "bka_used_price_asc", label: "Price Low to High" },
		{ value: "bka_used_year_asc", label: "Old to New" },
		{ value: "bka_used_year_desc", label: "New to Old" }
	]}
/>

Now we can import the SortBy component. Give the required defaultRefinement prop your default index. Then, assign the replicated indices with their corresponding labels.

Custom Widgets

These are needed to provide custom props to InstantSearch Widgets

Hits

RefinementList

ClearRefinements

PHP Client

Replace All Objects

PreviousAdvanced Custom Fields NextWooCommerce

Last updated 3 years ago

Was this helpful?