/instant-search-demo

Instant-search demo (facets, sliders, paginations & more)

Primary LanguageCSSMIT LicenseMIT

Note: this repository is hosting the demo that was previously located at algolia/examples

Instant-Search Demo

This is a sample project of an Algolia Instant-Search result page on an e-commerce website. Algolia is a Search API that provides a hosted full-text, numerical and faceted search.

Demos

Try out the demo Instant search

Simplified version

This project also includes a simplified version of the implementation that includes a few less filtering options. The code is available in the files index-simplified.html and search-simplified.js. You can see it live here.

Features

  • Full-JavaScript/frontend implementation based on instantsearch.js
  • Results page refreshed as you type
  • Relevant results from the first keystroke
  • Rich set of filters
    • Multi-level categories
    • Range slider
    • Star rating
  • Typo-tolerance
  • Multiple sort orders
    • By Relevance
    • By Highest Price
    • By Lowest Price
  • Backup search parameters in the URL

Run and develop locally

First, install nvm, then run:

git clone git@github.com:algolia/instant-search-demo.git
cd instant-search-demo
nvm use
npm install
npm start
open http://localhost:3000

We've included some credentials in the code allowing you to test the demo without any Algolia account.

Data import

If you want to replicate this demo using your own Algolia credentials that you can obtain creating a free account on Algolia.com.

Just install the Ruby algoliasearch gem and use the push.rb script to send the data and automatically configure the product index (same for both versions).

$ gem install algoliasearch
$ ./dataset_import/push.rb YourApplicationID YourAdminAPIKey YourIndexName

Then, you'll need to replace the demo credentials with your own:

  • in search.js and search-simplified.js, set your own APPLICATION_ID instead of "latency" (which is our demo APPLICATION_ID),
  • in search.js and search-simplified.js, set your own SEARCH_ONLY_API_KEY instead of "6be0576ff61c053d5f9a3225e2a90f76",
  • in search.js and search-simplified.js, set your own index name instead of "instant_search".

We've extracted 20 000+ products from the Best Buy Developer API. You can find the associated documentation here.

Tutorial

Follow this step by step tutorial (on Algolia.com) to learn how this implementation works and how it has been built using the instantsearch.js library.

A more general overview of filtering and faceting is available in a dedicated tutorial.