Algolia Search Integration for Website

Algolia Integration for Website Search

Algolia is a search SaaS with its own indexing servers and typo-tolerant search. Instead of implementing full-text search on PostgreSQL or Elasticsearch, use a ready-made index, API, and InstantSearch components for the frontend. The main work is to set up data synchronization and configure relevance.

How Algolia Works

Data is loaded into an index (similar to a table) as JSON objects with attributes. Search is performed on configured fields with consideration for typos, synonyms, and weights. Each object must have a unique objectID.

Free plan limitations: 10,000 records, 10,000 search requests per month. Sufficient for small sites.

Installation and Indexing

composer require algolia/algoliasearch-client-php
npm install algoliasearch instantsearch.js
# or for React:
npm install algoliasearch react-instantsearch

Simple indexing via PHP SDK:

use Algolia\AlgoliaSearch\SearchClient;

$client = SearchClient::create(
    config('algolia.app_id'),
    config('algolia.admin_api_key') // Admin key — backend only!
);

$index = $client->initIndex('products');

// Index a single object
$index->saveObject([
    'objectID'    => 'product-' . $product->id,
    'name'        => $product->name,
    'description' => strip_tags($product->description),
    'category'    => $product->category->name,
    'price'       => $product->price,
    'in_stock'    => $product->stock > 0,
    'image_url'   => $product->thumbnail_url,
    'slug'        => $product->slug,
]);

// Batch indexing
$objects = Product::with('category')->get()->map(fn($p) => [
    'objectID'  => 'product-' . $p->id,
    'name'      => $p->name,
    'category'  => $p->category->name,
    'price'     => $p->price,
    'in_stock'  => $p->stock > 0,
])->toArray();

$index->saveObjects($objects);

Synchronization via Observer

The index should update when data changes. Observer in Laravel:

class ProductObserver {
    private SearchClient $algolia;

    public function __construct() {
        $this->algolia = SearchClient::create(
            config('algolia.app_id'),
            config('algolia.admin_api_key')
        );
    }

    public function saved(Product $product): void {
        $this->algolia->initIndex('products')->saveObject(
            $this->toAlgoliaRecord($product)
        );
    }

    public function deleted(Product $product): void {
        $this->algolia->initIndex('products')->deleteObject('product-' . $product->id);
    }

    private function toAlgoliaRecord(Product $product): array {
        return [
            'objectID'    => 'product-' . $product->id,
            'name'        => $product->name,
            'description' => Str::limit(strip_tags($product->description), 300),
            'category'    => $product->category->name,
            'tags'        => $product->tags->pluck('name')->toArray(),
            'price'       => (float)$product->price,
            'in_stock'    => $product->stock > 0,
            'image_url'   => $product->thumbnail_url,
            'slug'        => $product->slug,
            'updated_at'  => $product->updated_at->timestamp,
        ];
    }
}

Register in AppServiceProvider:

Product::observe(ProductObserver::class);

Index Configuration: Relevance and Filters

Configure attributes for search and filtering via Dashboard or API:

$index->setSettings([
    // Fields to search (order = priority)
    'searchableAttributes' => [
        'name',
        'unordered(category)',
        'unordered(description)',
        'unordered(tags)',
    ],

    // Attributes for filtering and facets
    'attributesForFaceting' => [
        'filterOnly(price)',
        'category',
        'in_stock',
    ],

    // What to return in results (exclude heavy fields)
    'attributesToRetrieve' => [
        'objectID', 'name', 'price', 'category', 'image_url', 'slug', 'in_stock',
    ],

    // Highlight matches
    'attributesToHighlight' => ['name', 'category'],

    // Typo tolerance
    'typoTolerance' => true,
    'minWordSizefor1Typo' => 4,
    'minWordSizefor2Typos' => 8,

    // Ranking
    'ranking' => [
        'typo', 'geo', 'words', 'filters', 'proximity', 'attribute',
        'exact', 'custom',
    ],
    'customRanking' => ['desc(updated_at)'],
]);

React Search Component

import algoliasearch from 'algoliasearch/lite';
import {
    InstantSearch,
    SearchBox,
    Hits,
    RefinementList,
    Pagination,
    Highlight,
    Configure,
} from 'react-instantsearch';

const searchClient = algoliasearch(
    import.meta.env.VITE_ALGOLIA_APP_ID,
    import.meta.env.VITE_ALGOLIA_SEARCH_KEY  // Search-only key, public
);

const ProductHit: React.FC<{ hit: ProductRecord }> = ({ hit }) => (
    <a href={`/products/${hit.slug}`} className="flex gap-3 p-3 hover:bg-gray-50 rounded">
        <img src={hit.image_url} alt={hit.name} className="w-12 h-12 object-cover rounded" />
        <div>
            <p className="font-medium">
                <Highlight attribute="name" hit={hit} />
            </p>
            <p className="text-sm text-gray-500">
                <Highlight attribute="category" hit={hit} />
            </p>
            <p className="font-semibold">{hit.price.toLocaleString()} ₽</p>
        </div>
    </a>
);

export const SiteSearch: React.FC = () => (
    <InstantSearch searchClient={searchClient} indexName="products">
        <Configure hitsPerPage={20} filters="in_stock:true" />
        <SearchBox
            placeholder="Search products..."
            classNames={{ input: 'w-full border rounded-lg px-4 py-2' }}
        />
        <div className="flex gap-6 mt-4">
            <aside className="w-48 shrink-0">
                <p className="font-medium mb-2">Category</p>
                <RefinementList attribute="category" />
            </aside>
            <div className="flex-1">
                <Hits hitComponent={ProductHit} />
                <Pagination className="mt-4" />
            </div>
        </div>
    </InstantSearch>
);

Search in Modal (Command Palette)

For quick access, implement search in an overlay without redirecting to results page:

import { useSearchBox, useHits } from 'react-instantsearch';

const CommandSearch: React.FC<{ onSelect: (hit: any) => void }> = ({ onSelect }) => {
    const { query, refine } = useSearchBox();
    const { hits } = useHits();

    return (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center pt-20">
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-xl overflow-hidden">
                <input
                    autoFocus
                    value={query}
                    onChange={e => refine(e.target.value)}
                    placeholder="Search..."
                    className="w-full px-4 py-3 text-lg outline-none border-b"
                />
                <div className="max-h-96 overflow-y-auto">
                    {hits.map(hit => (
                        <button key={hit.objectID} onClick={() => onSelect(hit)}
                            className="w-full text-left px-4 py-2 hover:bg-blue-50">
                            {hit.name}
                        </button>
                    ))}
                </div>
            </div>
        </div>
    );
};

Search Analytics

Algolia collects clicks and conversions to improve relevance. Enable it:

import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
import aa from 'search-insights';

aa('init', {
    appId: import.meta.env.VITE_ALGOLIA_APP_ID,
    apiKey: import.meta.env.VITE_ALGOLIA_SEARCH_KEY,
    useCookie: true,
});

// In InstantSearch
<InstantSearch
    searchClient={searchClient}
    indexName="products"
    middlewares={[createInsightsMiddleware({ insightsClient: aa })]}
    insights
>

After this, Algolia starts collecting data on which queries result in clicks and automatically improves ranking.

Implementation Timeline

Basic integration with indexing via Observer and frontend search: 1–2 days. Adding faceted filtering, Command Palette, analytics, and relevance tuning: 3–4 days. Multilingual indexes (separate index per language) with synchronization: plus 1–2 days.