E-commerce demo

ecommerce.html

<div class='input-group'>
  <input autocomplete='off' autocorrect='off' class='form-control' id='searchinput' placeholder='Search a product, brand, category...' spellcheck='false' type='text'>
  <span class='input-group-addon'>
    <i class='icon-search'></i>
  </span>
</div>
<div class='categories'></div>
<div class='brands'></div>
<div class='products'></div>

<script>
  var last_query = '';
  var client = new AlgoliaSearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
  
  function searchCallback(success, content) {
    $('.browser-page-help').hide();
    if (content.results.length < 2 || content.results[0].query != last_query) {
        return;
    }
  
    var cats = content.results[0];
  
    var html = '';
    var foundCats = false;
    for (var i = 0; i < cats.hits.length; ++i) {
      var hit = cats.hits[i];
      var explain = AlgoliaExplainResults(hit, 'name', ['brands']);
  
      if (explain.title.length == 0) {
        continue;
      }
      if (html.length == 0) {
        html += '<div class="title">Categories</div>';
      }
  
      html += '<div class="category">' + explain.title + "</div>";
      for (var j = 0; j < 2 && j < explain.subtitles.length; ++j) {
          count = 0;
          var text = hit._highlightResult.brands[j].brand.value.replace(/<[/]?em>/g, "");
          for (var k = 0; k < hit.brands.length; ++k)
            if (hit.brands[k].brand === text)
              count = hit.brands[k].count;
          html +=  '<div class="category"><small><span class="text-muted">by </span>' + explain.subtitles[j].value + ' (' + count + ')</small></div>';
      }
      if (i == 0 && explain.subtitles.length == 0) {
        for (var j = 0; j < 2 && j < hit._highlightResult.brands.length; ++j) {
          count = 0;
          var text = hit._highlightResult.brands[j].brand.value.replace(/<[/]?em>/g, "");
          for (var k = 0; k < hit.brands.length; ++k)
            if (hit.brands[k].brand === text)
              count = hit.brands[k].count;
          html +=  '<div class="category"><small><span class="text-muted">by </span>' + hit._highlightResult.brands[j].brand.value + ' (' + count + ')</small></div>';
        }
      }
      foundCats = true;
    }
    $('.categories').html(html);
  
    var brands = content.results[1];
    html = '';
    for (var i = 0; i < brands.hits.length; ++i) {
      var hit = brands.hits[i];
      if (hit._highlightResult.name.matchLevel == 'none')
        continue;
      if (html.length == 0) {
          html += '<div class="title">Brands</div>';
      }
  
      html += '<div class="brand">' + hit._highlightResult.name.value + "</div>";
      if (!foundCats && i == 0) {
        for (var j = 0; j < 2 && j < hit._highlightResult.cats.length; ++j) {
          html +=  '<div class="brand"><small><span class="text-muted">in </span>' + hit._highlightResult.cats[j].name.value + ' (' + hit._highlightResult.cats[j].count + ')</small></div>';
        }
      }
      html += '</div>';
    }
    $('.brands').html(html);
    if (content.results.length == 3) {
      var products = content.results[2];
      html = '';
      for (var i = 0; i < products.hits.length; ++i) {
        var hit = products.hits[i];
        if (hit.name.length == 0)
          continue;
        var explain = AlgoliaExplainResults(products.hits[i], 'name', ['brand', 'color']);
        if (html.length == 0) {
            html += '<div class="title">Products</div>';
        }
        html += '<div class="product">' +
          '<img src="//d3pkevt87ob17v.cloudfront.net/ecommerce/pictures/' + hit.objectID + '-1.jpg%3Falgolia" />' +
          '<div class="price text-muted">$' + hit.priceUSD + '</div>' +
          '<div class="name">' + (explain.title.length > 0 ? explain.title : hit.name) + '</div>';
        for (var j = 0; j < 2 && j < explain.subtitles.length; ++j) {
          var e = explain.subtitles[j];
          html +=  '<small><span class="text-muted">' + (e.attr == 'brand' ? 'Brand: ' : 'Color: ') + "</span>" + e.value + '</small>';
        }
        if (explain.subtitles.length == 0) {
          html +=  '<small><span class="text-muted">Brand: </span>' + hit.brand + '</small>';
        }
        html += '<div class="clearfix"></div></div>';
      }
      $('.products').html(html);
    }
  }
  
  function searchAnimation(e) {
    last_query = $("#searchinput").val();
    if (last_query.length == 0) {
        $('.categories').empty();
        $('.brands').empty();
        $('.products').empty();
        $('.browser-page-help').show();
        return;
    }
    client.startQueriesBatch();
    client.addQueryInBatch("categories", last_query, { hitsPerPage: 3, queryType: "prefixAll" });
    client.addQueryInBatch("brands", last_query, { hitsPerPage: 3, attributesToHighlight: ["name", "cats"] });
    if (last_query.length >= 3) {
        client.addQueryInBatch("products", last_query, { hitsPerPage: 5 });
    } else {
        $('.products').empty();
    }
    client.sendQueriesBatch(searchCallback);
  }
  
  $('#searchinput').on('keyup', searchAnimation).on('change', searchAnimation).focus();
</script>