├── .eslintrc.js
├── .gitignore
├── .nvmrc
├── .travis.yml
├── LICENSE
├── README.md
├── assets
├── img
│ ├── checkbox_icons.png
│ ├── delete_icon.png
│ ├── icons.sketch
│ ├── instant_search_logo@2x.png
│ └── search_icon.png
└── style.css
├── dataset_import
├── README.md
├── bestbuy_dataset.json
├── bestbuy_dataset_light.json
└── push.rb
├── google8e67fdc26892f7ed.html
├── index-simplified.html
├── index.html
├── package-lock.json
├── package.json
├── screenshots
├── instant-search-default.gif
└── instant-search-simplified.gif
├── search-simplified.js
└── search.js
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: 'algolia'
3 | };
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 9.11.2
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | branches:
3 | only:
4 | - master
5 | cache:
6 | directories:
7 | - node_modules
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-Present Algolia, Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **Note:** this repository is hosting the demo that was previously located at [algolia/examples](https://github.com/algolia/examples/tree/master/instant-search/instantsearch.js/)
2 |
3 | -----
4 |
5 | Instant-Search Demo
6 | ====================
7 |
8 | This is a sample project of an [Algolia](http://www.algolia.com) Instant-Search result page on an e-commerce website. Algolia is a Search API that provides a hosted full-text, numerical and faceted search.
9 |
10 | ## Demos
11 | Try out the [demo](https://preview.algolia.com/instantsearch/)
12 | 
13 |
14 | ### Simplified version
15 | This project also includes a simplified version of the implementation that includes a few less filtering options.
16 | The code is available in the files `index-simplified.html` and `search-simplified.js`. You can [see it live here](https://preview.algolia.com/instantsearch/index-simplified.html).
17 |
18 | ## Features
19 | * Full-JavaScript/frontend implementation based on [instantsearch.js](https://community.algolia.com/instantsearch.js/)
20 | * Results page refreshed as you type
21 | * Relevant results from the first keystroke
22 | * Rich set of filters
23 | * Multi-level categories
24 | * Range slider
25 | * Star rating
26 | * Typo-tolerance
27 | * Multiple sort orders
28 | * By Relevance
29 | * By Highest Price
30 | * By Lowest Price
31 | * Backup search parameters in the URL
32 |
33 | ## Run and develop locally
34 |
35 | First, [install nvm](https://github.com/creationix/nvm#installation), then run:
36 |
37 | ```sh
38 | git clone git@github.com:algolia/instant-search-demo.git
39 | cd instant-search-demo
40 | nvm use
41 | npm install
42 | npm start
43 | open http://localhost:3000
44 | ```
45 |
46 | We've included some credentials in the code allowing you to test the demo without any Algolia account.
47 |
48 | ### Data import
49 | If you want to replicate this demo using your own Algolia credentials that you can obtain creating a free account on Algolia.com.
50 |
51 | 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).
52 |
53 | ```sh
54 | $ gem install algoliasearch
55 | $ ./dataset_import/push.rb YourApplicationID YourAdminAPIKey YourIndexName
56 | ```
57 |
58 | Then, you'll need to replace the demo credentials with your own:
59 | - in `search.js` and `search-simplified.js`, set your own `APPLICATION_ID` instead of `"latency"` (which is our demo `APPLICATION_ID`),
60 | - in `search.js` and `search-simplified.js`, set your own `SEARCH_ONLY_API_KEY` instead of `"6be0576ff61c053d5f9a3225e2a90f76"`,
61 | - in `search.js` and `search-simplified.js`, set your own `index` name instead of `"instant_search"`.
62 |
63 |
64 | We've extracted 20 000+ products from the [Best Buy Developer API](https://developer.bestbuy.com). You can find the associated documentation [here](https://developer.bestbuy.com/documentation/products-api).
65 |
66 | ## Tutorial
67 |
68 | **Follow this [step by step tutorial](https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/) (on Algolia.com) to learn how this implementation works** and how it has been built using the [instantsearch.js library](https://community.algolia.com/instantsearch.js/).
69 |
70 | A more general overview of filtering and faceting is available in a [dedicated tutorial](https://www.algolia.com/doc/tutorials/search-ui/instant-search/filtering/faceting-search-ui/instantsearchjs/).
71 |
72 |
--------------------------------------------------------------------------------
/assets/img/checkbox_icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algolia/instant-search-demo/55e7fae8a245d5d3c8de30e1915f8beef3b7385a/assets/img/checkbox_icons.png
--------------------------------------------------------------------------------
/assets/img/delete_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algolia/instant-search-demo/55e7fae8a245d5d3c8de30e1915f8beef3b7385a/assets/img/delete_icon.png
--------------------------------------------------------------------------------
/assets/img/icons.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algolia/instant-search-demo/55e7fae8a245d5d3c8de30e1915f8beef3b7385a/assets/img/icons.sketch
--------------------------------------------------------------------------------
/assets/img/instant_search_logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algolia/instant-search-demo/55e7fae8a245d5d3c8de30e1915f8beef3b7385a/assets/img/instant_search_logo@2x.png
--------------------------------------------------------------------------------
/assets/img/search_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algolia/instant-search-demo/55e7fae8a245d5d3c8de30e1915f8beef3b7385a/assets/img/search_icon.png
--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
1 | /* GENERAL */
2 | * {
3 | font-family: 'Helvetica Neue', Helvetica, sans-serif;
4 | box-sizing: border-box;
5 | }
6 | html {
7 | overflow-y: scroll;
8 | background: #fff;
9 | }
10 | header,
11 | main,
12 | #no-results,
13 | footer {
14 | width: 1000px;
15 | margin: 0 auto;
16 | }
17 | main {
18 | min-height: 360px;
19 | }
20 | #left-column {
21 | float: left;
22 | width: 23%;
23 | }
24 | #right-column {
25 | width: 74%;
26 | margin-left: 26%;
27 | }
28 |
29 | .clear:after {
30 | content: '';
31 | display: table;
32 | clear: both;
33 | }
34 |
35 | /* INPUT */
36 | header {
37 | position: relative;
38 | height: 80px;
39 | margin-top: 40px;
40 | }
41 | header img {
42 | position: absolute;
43 | top: 9px;
44 | left: 0;
45 | float: left;
46 | max-width: 23%;
47 | }
48 | .ais-SearchBox-form {
49 | position: relative;
50 | }
51 |
52 | .ais-SearchBox-input {
53 | width: 100%;
54 | -webkit-appearance: none;
55 | appearance: none;
56 | border: 1px solid #ccc;
57 | border-radius: 4px;
58 | font-size: 16px;
59 | padding: 5px 20px;
60 | }
61 | .ais-SearchBox-reset {
62 | position: absolute;
63 | top: 0.5em;
64 | right: 0.25em;
65 | }
66 | .ais-SearchBox-submit {
67 | position: absolute;
68 | top: 0.5em;
69 | left: 0.25em;
70 | }
71 | #search-input .ais-SearchBox-submit,
72 | #search-input .ais-SearchBox-reset {
73 | top: 16px;
74 | }
75 |
76 | .ais-SearchBox-submit svg,
77 | .ais-SearchBox-reset svg {
78 | width: 1.25em;
79 | height: 1.25em;
80 | fill: rgb(142, 142, 142);
81 | }
82 | #search-input {
83 | margin-left: 26%;
84 | }
85 | #search-input input {
86 | font-size: 28px;
87 | padding-left: 100px;
88 | font-weight: 100;
89 | padding: 10px 10px 5px 35px;
90 | border: none;
91 | border-bottom: 5px solid #eee;
92 | appearance: none;
93 | -webkit-appearance: none;
94 | }
95 | #search-input input,
96 | #search-input input:focus {
97 | transition: border-color 0.3s ease-in;
98 | outline: 0;
99 | }
100 | #search-input input:focus {
101 | border-color: #ed5565;
102 | }
103 | #search-input input::-webkit-input-placeholder,
104 | #search-input input:-moz-placeholder,
105 | #search-input input:-moz-placeholder,
106 | #search-input input:-ms-input-placeholder {
107 | font-weight: 100;
108 | color: #999;
109 | }
110 |
111 | /* HITS */
112 | #hits {
113 | margin: 4px 0;
114 | padding: 10px 0;
115 | border-top: 2px solid #eee;
116 | }
117 | .hit {
118 | font-size: 0;
119 | padding: 15px 0;
120 | border-bottom: 1px solid #eee;
121 | }
122 | .hit-name {
123 | margin: 0;
124 | }
125 | .hit-image {
126 | display: inline-block;
127 | width: 16%;
128 | text-align: center;
129 | }
130 | .hit-image img {
131 | max-width: 100%;
132 | max-height: 180px;
133 | }
134 | .hit-content {
135 | font-size: 13px;
136 | font-weight: 300;
137 | display: inline-block;
138 | width: 81%;
139 | margin-left: 3%;
140 | vertical-align: top;
141 | }
142 | .hit-stars {
143 | font-size: 17px;
144 | margin: 4px 0;
145 | color: #868686;
146 | }
147 |
148 | .hit-content .hit-price {
149 | float: right;
150 | margin-left: 20px;
151 | color: #ffffff;
152 | background: #383838;
153 | padding: 4px;
154 | border-radius: 3px;
155 | }
156 | .hit-content .hit-price,
157 | .hit-content .hit-name {
158 | font-weight: normal;
159 | margin-top: 0;
160 | }
161 |
162 | .hit-content mark {
163 | font-style: normal;
164 | color: #ed5565;
165 | background-color: transparent;
166 | border-bottom: solid 1px rgba(244, 107, 91, 0.5);
167 | }
168 |
169 | .hit-content p {
170 | font-size: 13px;
171 | }
172 |
173 | .hit-description mark {
174 | color: inherit;
175 | background-color: inherit;
176 | }
177 |
178 | .hit-category-breadcrumb {
179 | margin: 5px 0 2px 0;
180 | }
181 |
182 | .hit-category-breadcrumb mark {
183 | color: inherit;
184 | }
185 |
186 | .hit-content .hit-description {
187 | color: #868686;
188 | margin: 1px 0 10px 0;
189 | font-size: 14px;
190 | }
191 |
192 | /* PAGINATION */
193 | #pagination {
194 | margin-top: 60px;
195 | }
196 | #pagination ul {
197 | font-size: 0;
198 | list-style-type: none;
199 | text-align: center;
200 | display: block;
201 | }
202 | #pagination li {
203 | font-size: 14px;
204 | display: inline;
205 | }
206 | #pagination a,
207 | #pagination span {
208 | padding: 8px 12px;
209 | text-decoration: none;
210 | color: #000;
211 | border: 1px solid #eee;
212 | }
213 | #pagination a:hover,
214 | #pagination span:hover {
215 | background: #f5f5f5;
216 | }
217 | #pagination .ais-Pagination-item {
218 | padding: 3px;
219 | }
220 |
221 | #pagination .ais-Pagination-item:first-child {
222 | border-top-left-radius: 4px;
223 | border-bottom-left-radius: 4px;
224 | }
225 | #pagination .ais-Pagination-item:last-child {
226 | border-right: 1px solid #eee;
227 | border-top-right-radius: 4px;
228 | border-bottom-right-radius: 4px;
229 | }
230 | #pagination .ais-Pagination-item--selected a {
231 | color: white;
232 | border-color: #ed5565;
233 | background: #ed5565;
234 | }
235 | #pagination .ais-Pagination-item--selected a:hover {
236 | cursor: default;
237 | }
238 | #pagination .ais-Pagination-item--disabled {
239 | cursor: not-allowed;
240 | }
241 | #pagination .ais-Pagination-item--disabled:hover {
242 | background: none;
243 | }
244 |
245 | /* SORT BY */
246 | #sort-by-wrapper {
247 | font-weight: 300;
248 | position: relative;
249 | float: right;
250 | color: #999;
251 | }
252 |
253 | #sort-by select {
254 | font-size: 16px;
255 | padding-right: 14px;
256 | cursor: pointer;
257 | border: none;
258 | outline: none;
259 | background: none;
260 | -webkit-appearance: none;
261 | -moz-appearance: none;
262 | }
263 |
264 | #sort-by:after {
265 | content: '';
266 | display: inline-block;
267 | position: absolute;
268 |
269 | top: 8px;
270 | right: 0;
271 |
272 | width: 0;
273 | height: 0;
274 |
275 | margin-left: 2px;
276 | vertical-align: middle;
277 |
278 | color: #000;
279 | border-top: 4px dashed;
280 | border-right: 4px solid transparent;
281 | border-left: 4px solid transparent;
282 |
283 | pointer-events: none;
284 | }
285 |
286 | /* FACETS */
287 | .facet {
288 | margin-bottom: 24px;
289 | font-size: 14px;
290 | color: #000;
291 | }
292 | .facet h5 {
293 | margin: 0 0 6px;
294 | padding: 0 0 6px;
295 | text-transform: uppercase;
296 | border-bottom: 2px solid #eee;
297 | }
298 | .facet ul {
299 | margin: 0;
300 | padding: 0;
301 | list-style-type: none;
302 | }
303 | .facet li {
304 | margin-bottom: 3px;
305 | }
306 |
307 | .facet a:visited,
308 | .facet a {
309 | color: #000;
310 | text-decoration: none;
311 | cursor: pointer;
312 | }
313 |
314 | .ais-RefinementList-label,
315 | .ais-HierarchicalMenu-list .facet-item,
316 | .ais-Menu-link {
317 | cursor: pointer;
318 | line-height: 1.5em;
319 | }
320 |
321 | .ais-HierarchicalMenu-list .ais-HierarchicalMenu-item {
322 | margin: 3px 0;
323 | }
324 |
325 | .ais-HierarchicalMenu-link:before {
326 | display: inline-block;
327 | font: normal normal normal 14px/1 FontAwesome;
328 | content: '\f105';
329 | padding: 0 5px 0 0;
330 | }
331 |
332 | .sffv_no-results {
333 | font-size: 13px;
334 | line-height: 1.2;
335 | padding-top: 6px;
336 | }
337 |
338 | .ais-RefinementList .ais-SearchBox-submit svg,
339 | .ais-RefinementList .ais-SearchBox-reset svg {
340 | width: 1em;
341 | height: 1em;
342 | fill: rgb(142, 142, 142);
343 | }
344 |
345 | .ais-RefinementList-label:hover,
346 | .ais-RefinementList-item--selected .ais-RefinementList-label,
347 | .ais-Menu-link:hover,
348 | .ais-Menu-item--selected .ais-Menu-link[class],
349 | .ais-HierarchicalMenu-list .facet-item.active:hover,
350 | .ais-HierarchicalMenu-list .facet-item.active {
351 | color: #ed5565;
352 | }
353 | .ais-RefinementList-item--selected .ais-RefinementList-label:hover,
354 | .ais-Menu-item--selected .ais-Menu-link:hover,
355 | .ais-HierarchicalMenu-list .facet-item.active:hover {
356 | text-decoration: line-through;
357 | color: #ed5565;
358 | }
359 | .ais-RefinementList-count,
360 | .ais-HierarchicalMenu-count,
361 | .ais-Menu-count,
362 | .ais-RatingMenu-count,
363 | .ais-ToggleRefinement-count {
364 | position: relative;
365 | float: right;
366 | color: #999;
367 | }
368 |
369 | /* NO RESULTS */
370 | .no-results #pagination,
371 | .no-results #sort-by,
372 | .no-results #stats,
373 | .no-results #facets {
374 | display: none;
375 | }
376 | #no-results-message {
377 | text-align: center;
378 | }
379 | #no-results-message p {
380 | font-size: 28px;
381 | font-weight: 100;
382 | }
383 | #no-results-message ul {
384 | list-style-type: none;
385 | }
386 | #no-results-message li {
387 | font-size: 12px;
388 | position: relative;
389 | display: inline-block;
390 | margin: 4px 2px;
391 | padding: 4px 28px 4px 8px;
392 | color: #999;
393 | border: 1px solid #ddd;
394 | border-radius: 12px;
395 | }
396 | #no-results-message li span.value {
397 | font-weight: bold;
398 | color: #000;
399 | }
400 | #no-results-message li a.remove img {
401 | position: absolute;
402 | top: 3px;
403 | right: 5px;
404 | float: right;
405 | width: 17px;
406 | height: 17px;
407 | opacity: 0.5;
408 | }
409 | #no-results-message li a.remove:hover img {
410 | opacity: 1;
411 | }
412 | a.clear-all {
413 | font-size: 12px;
414 | line-height: 1;
415 | display: inline-block;
416 | margin: 10px;
417 | padding: 8px 12px;
418 | text-decoration: none;
419 | color: black;
420 | border: 2px solid #ddd;
421 | border-radius: 4px;
422 | }
423 | a.clear-all:hover {
424 | transition: border-color 0.3s ease-in;
425 | border-color: #999;
426 | }
427 |
428 | /* SLIDER */
429 | .ais-RangeSlider .rheostat-progress {
430 | background-color: #46aeda;
431 | }
432 |
433 | .rheostat-handle {
434 | border-color: #ed5565;
435 | }
436 |
437 | /* Star Rating */
438 | .ais-RatingMenu-link {
439 | display: flex;
440 | }
441 |
442 | .ais-RatingMenu-label {
443 | flex-grow: 1;
444 | }
445 |
446 | .ais-Menu-item--selected,
447 | .ais-RefinementList-item--selected,
448 | .ais-HierarchicalMenu-item--selected,
449 | .ais-RatingMenu-item--selected {
450 | font-weight: bold;
451 | }
452 |
453 | .ais-RatingMenu-starIcon,
454 | .ais-RatingMenu-starIcon--emtpy {
455 | display: inline-block;
456 | width: 1em;
457 | height: 1em;
458 | }
459 |
460 | .ais-RatingMenu-starIcon,
461 | .ais-RatingMenu-starIcon--empty {
462 | fill: currentColor;
463 | color: #fbae00;
464 | }
465 |
466 | .ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon,
467 | .ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon--empty {
468 | color: #c9c9c9;
469 | }
470 |
471 | /* Toggle */
472 | .ais-ToggleRefinement-label {
473 | cursor: pointer;
474 | }
475 |
476 | /* RefinementList ShowMore */
477 | .ais-RefinementList-showMore,
478 | .ais-Menu-showMore {
479 | font-weight: bold;
480 | opacity: 0.7;
481 | padding-left: 4px;
482 | position: relative;
483 | line-height: 25px;
484 | font-size: 0.9em;
485 | }
486 | .ais-RefinementList-showMore:hover,
487 | .ais-RefinementList-showMore:focus,
488 | .ais-Menu-showMore:hover,
489 | .ais-Menu-showMore:focus {
490 | opacity: 1;
491 | }
492 | .ais-RefinementList-showMore .isShowingMore:before,
493 | .ais-RefinementList-showMore .isShowingLess:before,
494 | .ais-Menu-showMore .isShowingMore:before,
495 | .ais-Menu-showMore .isShowingLess:before {
496 | font-family: FontAwesome;
497 | font-style: inherit;
498 | font-weight: inherit;
499 | text-decoration: inherit;
500 | display: inline-block;
501 | position: relative;
502 | content: '';
503 | margin: 0 5px 0 0;
504 | }
505 |
506 | .ais-RefinementList-showMore .isShowingMore:before,
507 | .ais-Menu-showMore .isShowingMore:before {
508 | content: '\f0fe';
509 | }
510 |
511 | .ais-RefinementList-showMore .isShowingLess:before,
512 | .ais-Menu-showMore .isShowingLess:before {
513 | content: '\f146';
514 | }
515 |
516 | /* FOOTER */
517 | footer {
518 | font-size: 14px;
519 | margin-top: 200px;
520 | margin-bottom: 15px;
521 | text-align: center;
522 | }
523 | footer a {
524 | text-decoration: none;
525 | color: #ed5565;
526 | }
527 | footer a:hover {
528 | text-decoration: underline;
529 | color: #ed5565;
530 | }
531 |
--------------------------------------------------------------------------------
/dataset_import/README.md:
--------------------------------------------------------------------------------
1 | ## Dataset
2 | The dataset is available in two version:
3 |
4 | * **bestbuy_dataset.json** - 20 000+ products
5 | * **bestbuy_dataset_light.json** - slimmed version with 10 000 products
6 |
7 | ## Import
8 |
9 | ```sh
10 | $ ./push.rb YourApplicationID YourAPIKey YourIndexName
11 | ```
12 | (By default, the script uses the *bestbuy_dataset_light.json* dataset)
13 |
--------------------------------------------------------------------------------
/dataset_import/push.rb:
--------------------------------------------------------------------------------
1 | #! /usr/bin/env ruby
2 |
3 | require "json"
4 | require "algoliasearch"
5 | require "open-uri"
6 |
7 |
8 | ####
9 | #### LAUNCH
10 | ####
11 | if ARGV.length != 3
12 | $stderr << "usage: push.rb APPLICATION_ID API_KEY INDEX\n"
13 | exit 1
14 | end
15 |
16 | APPLICATION_ID = ARGV[0]
17 | API_KEY = ARGV[1]
18 | INDEX_BASE = ARGV[2]
19 |
20 | ####
21 | #### LOAD DATA
22 | ####
23 | products = JSON.parse File.read("bestbuy_dataset_light.json")
24 |
25 |
26 | ####
27 | #### ALGOLIA INIT & CONFIGURATION
28 | ####
29 | Algolia.init :application_id => APPLICATION_ID, :api_key => API_KEY
30 | index = Algolia::Index.new(INDEX_BASE)
31 |
32 | default_settings = {
33 | attributesToIndex: %w(brand unordered(name) unordered(categories) unordered(description)),
34 | customRanking: ['desc(popularity)'],
35 | attributesForFaceting: %w(brand categories free_shipping hierarchicalCategories.lvl0 hierarchicalCategories.lvl1 hierarchicalCategories.lvl2 price price_range type rating hierarchicalCategories.lvl3 hierarchicalCategories.lvl4 popularity),
36 | minWordSizefor1Typo: 3,
37 | minWordSizefor2Typos: 7,
38 | ignorePlurals: true
39 | }
40 |
41 |
42 |
43 | index_settings = default_settings.merge({ slaves: %W(#{INDEX_BASE}_price_desc #{INDEX_BASE}_price_asc) })
44 | price_desc_settings = default_settings.merge({ ranking: %w(desc(price) typo geo words proximity attribute exact custom), typoTolerance: "min" })
45 | price_asc_settings = default_settings.merge({ ranking: %w(asc(price) typo geo words proximity attribute exact custom), typoTolerance: "min" })
46 |
47 | index.set_settings(index_settings)
48 | Algolia::Index.new("#{INDEX_BASE}_price_desc").set_settings(price_desc_settings)
49 | Algolia::Index.new("#{INDEX_BASE}_price_asc").set_settings(price_asc_settings)
50 |
51 |
52 | ####
53 | #### INDEXING
54 | ####
55 | index.clear
56 | products.each_slice(1000) do |batch|
57 | index.add_objects batch
58 | end
59 |
--------------------------------------------------------------------------------
/google8e67fdc26892f7ed.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google8e67fdc26892f7ed.html
--------------------------------------------------------------------------------
/index-simplified.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Instant Search Tutorial
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 
19 |
20 |
21 |
22 |
23 |
29 |
30 |
36 |
37 |
38 |
42 |
43 |
44 |
45 |
57 |
58 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Instant Search Tutorial
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 |
40 |
No matching brands.
',
72 | },
73 | },
74 | templates: {
75 | header: getHeader('Brand'),
76 | },
77 | }),
78 | instantsearch.widgets.rangeSlider({
79 | container: '#price',
80 | attribute: 'price',
81 | templates: {
82 | header: getHeader('Price'),
83 | },
84 | }),
85 | instantsearch.widgets.refinementList({
86 | container: '#type',
87 | attribute: 'type',
88 | operator: 'and',
89 | templates: {
90 | header: getHeader('Type'),
91 | },
92 | }),
93 | ]);
94 |
95 | search.start();
96 | }
97 |
98 | function getTemplate(templateName) {
99 | return document.querySelector(`#${templateName}-template`).innerHTML;
100 | }
101 |
102 | function getHeader(title) {
103 | return `${title}
`;
104 | }
105 |
--------------------------------------------------------------------------------
/search.js:
--------------------------------------------------------------------------------
1 | /* global instantsearch algoliasearch */
2 |
3 | app({
4 | appId: 'latency',
5 | apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
6 | indexName: 'instant_search',
7 | searchParameters: {
8 | hitsPerPage: 10,
9 | },
10 | });
11 |
12 | function app(opts) {
13 | // ---------------------
14 | //
15 | // Init
16 | //
17 | // ---------------------
18 | const search = instantsearch({
19 | searchClient: algoliasearch(opts.appId, opts.apiKey),
20 | indexName: opts.indexName,
21 | routing: true,
22 | searchFunction: opts.searchFunction,
23 | });
24 |
25 | // ---------------------
26 | //
27 | // Default widgets
28 | //
29 | // ---------------------
30 | search.addWidgets([
31 | instantsearch.widgets.searchBox({
32 | container: '#search-input',
33 | placeholder: 'Search for products by name, type, brand, ...',
34 | }),
35 | instantsearch.widgets.hits({
36 | container: '#hits',
37 | templates: {
38 | item: getTemplate('hit'),
39 | empty: getTemplate('no-results'),
40 | },
41 | transformItems(items) {
42 | return items.map(item => {
43 | /* eslint-disable no-param-reassign */
44 | item.starsLayout = getStarsHTML(item.rating);
45 | item.categories = getCategoryBreadcrumb(item);
46 | return item;
47 | });
48 | },
49 | }),
50 | instantsearch.widgets.stats({
51 | container: '#stats',
52 | }),
53 | instantsearch.widgets.sortBy({
54 | container: '#sort-by',
55 | items: [
56 | {
57 | value: opts.indexName,
58 | label: 'Most relevant',
59 | },
60 | {
61 | value: `${opts.indexName}_price_asc`,
62 | label: 'Lowest price',
63 | },
64 | {
65 | value: `${opts.indexName}_price_desc`,
66 | label: 'Highest price',
67 | },
68 | ],
69 | }),
70 | instantsearch.widgets.pagination({
71 | container: '#pagination',
72 | scrollTo: '#search-input',
73 | }),
74 |
75 | // ---------------------
76 | //
77 | // Filtering widgets
78 | //
79 | // ---------------------
80 | instantsearch.widgets.panel({
81 | templates: {
82 | header: getHeaderTemplate('category'),
83 | },
84 | })(instantsearch.widgets.hierarchicalMenu)({
85 | container: '#hierarchical-categories',
86 | attributes: [
87 | 'hierarchicalCategories.lvl0',
88 | 'hierarchicalCategories.lvl1',
89 | 'hierarchicalCategories.lvl2',
90 | ],
91 | showParentLevel: true,
92 | templates: {
93 | item:
94 | ' {{label}}', // eslint-disable-line
95 | },
96 | }),
97 | instantsearch.widgets.panel({
98 | templates: {
99 | header: getHeaderTemplate('brand'),
100 | },
101 | })(instantsearch.widgets.refinementList)({
102 | container: '#brand',
103 | attribute: 'brand',
104 | limit: 5,
105 | showMore: true,
106 | showMoreLimit: 10,
107 | searchable: true,
108 | searchablePlaceholder: 'Search for brands',
109 | templates: {
110 | searchableNoResults:
111 | 'No matching brands.
',
112 | showMoreText: `
113 | {{#isShowingMore}}
114 |
115 | Show less
116 | {{/isShowingMore}}
117 | {{^isShowingMore}}
118 |
119 | Show more
120 | {{/isShowingMore}}
121 | `,
122 | },
123 | }),
124 | instantsearch.widgets.panel({
125 | templates: {
126 | header: getHeaderTemplate('price'),
127 | },
128 | })(instantsearch.widgets.rangeSlider)({
129 | container: '#price',
130 | attribute: 'price',
131 | tooltips: {
132 | format(rawValue) {
133 | return `$${Math.round(rawValue).toLocaleString()}`;
134 | },
135 | },
136 | }),
137 | instantsearch.widgets.panel({
138 | templates: {
139 | header: getHeaderTemplate('rating'),
140 | },
141 | })(instantsearch.widgets.ratingMenu)({
142 | container: '#stars',
143 | attribute: 'rating',
144 | max: 5,
145 | labels: {
146 | andUp: '& Up',
147 | },
148 | }),
149 | instantsearch.widgets.panel({
150 | templates: {
151 | header: getHeaderTemplate('shipping'),
152 | },
153 | })(instantsearch.widgets.toggleRefinement)({
154 | container: '#free-shipping',
155 | attribute: 'free_shipping',
156 | label: 'Free Shipping',
157 | values: {
158 | on: true,
159 | },
160 | }),
161 | instantsearch.widgets.panel({
162 | templates: {
163 | header: getHeaderTemplate('type'),
164 | },
165 | })(instantsearch.widgets.menu)({
166 | container: '#type',
167 | attribute: 'type',
168 | limit: 10,
169 | showMore: true,
170 | templates: {
171 | showMoreText: `
172 | {{#isShowingMore}}
173 |
174 | Show less
175 | {{/isShowingMore}}
176 | {{^isShowingMore}}
177 |
178 | Show more
179 | {{/isShowingMore}}
180 | `,
181 | },
182 | }),
183 | ]);
184 |
185 | search.start();
186 | }
187 |
188 | // ---------------------
189 | //
190 | // Helper functions
191 | //
192 | // ---------------------
193 | function getTemplate(templateName) {
194 | return document.querySelector(`#${templateName}-template`).innerHTML;
195 | }
196 |
197 | function getHeaderTemplate(name) {
198 | return ``;
199 | }
200 |
201 | function getCategoryBreadcrumb(item) {
202 | const highlightValues = item._highlightResult.categories || [];
203 | return highlightValues.map(category => category.value).join(' > ');
204 | }
205 |
206 | function getStarsHTML(rating, maxRating) {
207 | let html = '';
208 | const newRating = maxRating || 5;
209 |
210 | for (let i = 0; i < newRating; ++i) {
211 | html += ``;
214 | }
215 |
216 | return html;
217 | }
218 |
--------------------------------------------------------------------------------