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
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 [email protected]:algolia/instant-search-demo.git
cd instant-search-demo
nvm use
npm install
npm start
open http://localhost:3000We'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 YourIndexNameThen, you'll need to replace the demo credentials with your own:
- in
search.jsandsearch-simplified.js, set your ownAPPLICATION_IDinstead of"latency"(which is our demoAPPLICATION_ID), - in
search.jsandsearch-simplified.js, set your ownSEARCH_ONLY_API_KEYinstead of"6be0576ff61c053d5f9a3225e2a90f76", - in
search.jsandsearch-simplified.js, set your ownindexname 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.