Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/algolia/instantsearch-workshop
A 10-minute, step-by-step guide to creating your first instantsearch experience.
https://github.com/algolia/instantsearch-workshop
Last synced: 13 days ago
JSON representation
A 10-minute, step-by-step guide to creating your first instantsearch experience.
- Host: GitHub
- URL: https://github.com/algolia/instantsearch-workshop
- Owner: algolia
- Created: 2016-10-22T12:12:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T07:36:27.000Z (about 7 years ago)
- Last Synced: 2024-04-11T05:18:28.623Z (7 months ago)
- Language: CSS
- Homepage: http://community.algolia.com/instantsearch-workshop/
- Size: 9.77 KB
- Stars: 8
- Watchers: 71
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# instantsearch workshop
*(first held at the [Hackference 2016](https://2016.hackference.co.uk) hackathon in Birmingham, UK)*
At the end of the workshop you'll have used [instantsearch.js](https://community.algolia.com/instantsearch.js) to create a powerful search page for IMDB data. By default,
it will look like this, giving the user the abilty to search by title and facet by genre and rating:
## Setup
Fork this repository. You can also clone it, but if you fork it then you'll have the hassle-free option to deploy to Github pages.
Clone your fork and open the `index.html` page in your editor.
## Workshop
### Act 1
Open the `index.html` page in your browser. You should see basic HTML and a search box but no results. We're going to add the code step by step to get results to display and then we'll add more interactivity with facets.
Add this code to the `search.js` file. This instantiates instantsearch object and configures it with an Algolia `appID`, `apiKey` and `indexName`.
``` javascript
var search = instantsearch({
appId: 'latency',
apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
indexName: 'movies',
urlSync: {}
});
```
The Algolia app and index contains data that was uploaded in advance of the workshop. To upload your own data to Algolia, first get a [free account](https://www.algolia.com/users/sign_up), then check out the [import documentation](https://www.algolia.com/doc/guides/indexing/import-synchronize-data) to upload data and configure the index. Then, if you'd like to continue the workshop with your own data, just replace `appId`, `apiKey` and `indexName` with your own values.
Next, add this code after the last line. This registers the `input` text box as the search box for our application.
``` javascript
search.addWidget(
instantsearch.widgets.searchBox({
container: '#q'
})
);
```
Next, let's add a widget that will display the results of the search. The `#hits` element is the container that we'll put our results in.
``` javascript
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 10,
})
);
```
Add this at the end of the file and save it.
```
search.start();
```
Refresh your browser pointed to `index.html`. You should see now results that will change as you type queries.
The results will be shown as raw JSON until we template them, so let's template them :)
### Act 2
Add these templates above the hits widget declaration:
``` javascript
var hitTemplate =
'
' +
'' +
'' +
'' +
'' +
'{{{_highlightResult.title.value}}} {{#stars}}{{/stars}}
' +
'{{year}}
{{#genre}}{{.}} {{/genre}}
' +
'' +
'';
var noResultsTemplate =
'
No results found matching {{query}}.';
```
Next, replace the last `instantsearch.widgets.hits` declaration with this snippet. **Make sure you do not end up with duplicate declarations.**
``` javascript
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 10,
templates: {
empty: noResultsTemplate,
item: hitTemplate
},
transformData: function(hit) {
hit.stars = [];
for (var i = 1; i <= 5; ++i) {
hit.stars.push(i <= hit.rating);
}
return hit;
}
})
);
```
Refresh your `index.html` page, things should be looking much better now.
### Act 3
Now let's add a few more widgets. These can go right before the `search.start()` call at the end of the file.
First, for pagination.
``` javascript
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination',
cssClasses: {
root: 'pagination',
active: 'active'
}
})
);
```
Next, to refine by genre.
``` javascript
search.addWidget(
instantsearch.widgets.refinementList({
container: '#genres',
attributeName: 'genre',
operator: 'and',
limit: 10,
cssClasses: {
list: 'nav nav-list',
count: 'badge pull-right',
active: 'active'
}
})
);
```
Next, to use the star rating:
``` javascript
search.addWidget(
instantsearch.widgets.starRating({
container: '#ratings',
attributeName: 'rating',
cssClasses: {
list: 'nav',
count: 'badge pull-right'
}
})
);
```
Lastly, to add stats, like the performance of the search.
``` javascript
search.addWidget(
instantsearch.widgets.stats({
container: '#stats'
})
);
```
Save the `search.js` file and reload `index.html`. Search for a few of your favorite movies. Refine results as you please.
Note: this example uses an Algolia index that has already been created and populated. You can also use it with an index of your own, just remember to change the `appId` and `apiKey` above and the templates for displaying information. You will also need to configure faceting for each element field you have added a faceting widget for. You can do this on the `Display/Faceting` tab of the index inside of your Algolia dashboard.
## Host on Github Pages
Just head to the settings for your fork and flip the Github pages source to `master` branch.
## Thanks!
Thanks for doing the instantsearch workshop!