instantsearch/docgen/src/examples/tourism/search.js at cb2fc7aa1a7f48c2daaeb079a6d924de89a30b65 · algolia/instantsearch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* global instantsearch algoliasearch */

window.addEventListener('load', function() {
  var search = instantsearch({
    searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
    indexName: 'airbnb',
    routing: true
  });

  search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#q',
      placeholder: 'Where are you going?',
      magnifier: false
    })
  );

  search.addWidget(
    instantsearch.widgets.stats({
      container: '#stats'
    })
  );

  var hitTemplate =
    '<div class="hit col-sm-3">' +
    '<div class="pictures-wrapper">' +
      '<img class="picture" src="{{picture_url}}" />' +
      '<img class="profile" src="{{user.user.thumbnail_url}}" />' +
    '</div>' +
    '<div class="infos">' +
    '<h4 class="media-heading">{{{_highlightResult.name.value}}}</h4>' +
    '<p>{{room_type}} - {{{_highlightResult.city.value}}}, {{{_highlightResult.country.value}}}</p>' +
    '</div>' +
    '</div>';

  var noResultsTemplate = '<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>';

  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      hitsPerPage: 12,
      templates: {
        empty: noResultsTemplate,
        item: hitTemplate
      }
    })
  );

  search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination',
      scrollTo: '#results',
      cssClasses: {
        root: 'pagination',
        active: 'active'
      }
    })
  );

  search.addWidget(
    instantsearch.widgets.refinementList({
      container: '#room_types',
      attributeName: 'room_type',
      operator: 'or',
      cssClasses: {item: ['col-sm-3']},
      limit: 10,
      sortBy: ['name:asc']
    })
  );

  search.addWidget(
    instantsearch.widgets.rangeSlider({
      container: '#price',
      attributeName: 'price',
      pips: false,
      tooltips: {format: function(rawValue) {return '$' + parseInt(rawValue)}}
    })
    );

  search.addWidget(
    instantsearch.widgets.googleMaps({
      container: document.querySelector('#map'),
      prepareMarkerData: function(hit, index, hits) {
        return {
          title: hit.description
        };
      }
    })
  );

  search.addWidget(
    instantsearch.widgets.numericSelector({
      container: '#guests',
      attributeName: 'person_capacity',
      operator: '>=',
      options: [
        { label: '1 guest', value: 1},
        { label: '2 guests', value: 2},
        { label: '3 guests', value: 3},
        { label: '4 guests', value: 4},
        { label: '5 guests', value: 5},
        { label: '6 guests', value: 6}
      ]
    })
  );

  search.start();
});