Algolia Search

Getting StartedGitHub

basic configuration

What is React InstantSearch? - AlgoliaAlgolia

React InstantSearch Documentation

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.

Add Attributes for Faceting

Select Facets for Display

<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.

Create a Replica Index & Adjust the Configuration

Adjust the Ranking 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

Hits - AlgoliaAlgolia

Custom Hits Component

RefinementList

RefinementList - AlgoliaAlgolia

Can filter by facets that are configured in the Algolia dashboard

ClearRefinements

ClearRefinements - AlgoliaAlgolia

Removes filters

PHP Client

Integrations - AlgoliaAlgolia

Algolia docs for PHP client

Replace All Objects

Replace all records - AlgoliaAlgolia

how re-index works