Швидкий пошук на сайті: інтеграція Algolia під ключ

Згідно з офіційною документацією Algolia, typo-tolerant пошук дозволяє знаходити товари навіть при помилках введення.

Як інтегрувати Algolia?

Налаштування релевантності

Релевантність пошуку керується через налаштування індексу: порядок searchableAttributes задає вагу полів, ranking визначає фактори сортування (помилки, відстань, популярність). Додатково можна використовувати customRanking — наприклад, за датою оновлення. Через Dashboard або API виставляємо параметри:

$index->setSettings([
    'searchableAttributes' => [
        'name',
        'unordered(category)',
        'unordered(description)',
        'unordered(tags)',
    ],
    'attributesForFaceting' => [
        'filterOnly(price)',
        'category',
        'in_stock',
    ],
    'attributesToRetrieve' => [
        'objectID',
        'name',
        'price',
        'category',
        'image_url',
        'slug',
        'in_stock',
    ],
    'attributesToHighlight' => ['name', 'category'],
    'typoTolerance' => true,
    'minWordSizefor1Typo' => 4,
    'minWordSizefor2Typos' => 8,
    'ranking' => [
        'typo',
        'geo',
        'words',
        'filters',
        'proximity',
        'attribute',
        'exact',
        'custom',
    ],
    'customRanking' => ['desc(updated_at)'],
]);

Синхронізація даних через Laravel Observer

Індекс повинен оновлюватись при зміні даних. Observer в 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,
        ];
    }
}

Реєстрація в AppServiceProvider:

Product::observe(ProductObserver::class); 

React пошук

Для React пошук реалізується через бібліотеку react-instantsearch. Приклад:

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
);

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="Пошук товарів..."
      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">Категорія</p>
        <RefinementList attribute="category" />
      </aside>
      <div className="flex-1">
        <Hits hitComponent={ProductHit} />
        <Pagination className="mt-4" />
      </div>
    </div>
  </InstantSearch>
);

Algolia аналітика

Algolia збирає кліки та конверсії для покращення релевантності. Підключення:

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,
});

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

Додаткова інформація