Skip to content

Algolia

Algolia is a hosted search and discovery platform that provides fast, typo-tolerant full-text search via a managed API. It indexes product and content data and returns ranked, filtered results in milliseconds — without requiring a self-hosted search engine.

Zwerfkei Integration

  • Algolia Index Integration

    How catalog data is indexed into Algolia, the index record structure, facets and index replicas.

    Algolia Index Integration

What it does:

  • Indexes structured data (products, categories, content) via REST API or client libraries.
  • Returns ranked search results with typo tolerance, synonyms and custom ranking rules.
  • Supports faceted filtering: dynamic filters based on attributes (brand, category, price, material, etc.).
  • Provides query suggestions and autocomplete for search inputs.
  • Tracks search analytics: zero-result queries, click-through rates, conversion events.

How we use it (Zwerfkei):

  • Powering product search and filtered browsing on the Zwerfkei Website.
  • Serving faceted filters for category pages (brand, material, size, price range, etc.) to replace the current jQuery-based filter system.
  • Providing autocomplete and query suggestions in the search bar.

InstantSearch.js

Algolia InstantSearch.js is Algolia's open-source UI library for building search interfaces. It provides pre-built, composable widgets that connect directly to the Algolia API — handling state, routing, and UI updates automatically.

What it provides:

  • Widgets: ready-made UI components for search box, hits, pagination, refinement lists, range sliders, sort selectors and more.
  • Reactive state: all widgets share a single search state; changing one widget (e.g. a filter) automatically updates all others.
  • URL synchronisation: search state (query, active filters, page) can be reflected in the URL for shareable and bookmarkable searches.
  • SSR support: supports server-side rendering for initial page load performance and SEO.

Vue InstantSearch

Vue InstantSearch is the official Vue.js wrapper around InstantSearch.js. It exposes all InstantSearch widgets as Vue components, making them composable within the Zwerfkei Website's Vue.js frontend.

Why we use the Vue variant:

  • The Zwerfkei Website is built with Vue.js — Vue InstantSearch integrates natively without custom wrappers.
  • Components follow the same Vue reactivity model as the rest of the application.
  • Supports Vue 3 and the Composition API.

Key components used:

Component Purpose
<ais-instant-search> Root provider — connects all child components to the Algolia index.
<ais-search-box> Search input with debouncing and query binding.
<ais-hits> Renders the list of search results.
<ais-refinement-list> Facet filter for attribute values (e.g. brand, material).
<ais-range-input> Numeric range filter (e.g. price, weight).
<ais-sort-by> Switches between Algolia index replicas for sorting (price, popularity).
<ais-pagination> Page navigation for result sets.
<ais-configure> Passes search parameters (hits per page, filters, etc.) to Algolia.

Algolia website Algolia documentation InstantSearch.js documentation Vue InstantSearch documentation