Vanilla JS + Algolia

Get started

HTML (get a free account here)

1<div class="ais-InstantSearch">
2  <h1>InstantSearch.js e-commerce demo</h1>
3
4  <div class="left-panel">
5    <div id="clear-refinements"></div>
6
7    <h2>Brands</h2>
8    <div id="brand-list"></div>
9  </div>
10
11  <div class="right-panel">
12    <div id="searchbox"></div>
13    <div id="hits"></div>
14    <div id="pagination"></div>
15  </div>
16</div>

CSS

1body { font-family: sans-serif; padding: 1em; }
2.ais-SearchBox { margin: 1em 0; }
3.ais-Pagination { margin-top: 1em }
4.left-panel { float: left; width: 250px; }
5.right-panel { margin-left: 260px; }

Search

1search.addWidgets([
2  instantsearch.widgets.hits({
3    container: '#hits',
4    templates: {
5      item: `
6        <div>
7          <img src="{{image}}" align="left" alt="{{name}}" />
8          <div class="hit-name">
9            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
10          </div>
11          <div class="hit-description">
12            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
13          </div>
14          <div class="hit-price">\${{price}}</div>
15        </div>
16      `,
17    },
18  })
19]);