Algolia - VestaireCollective demo

algolia-vestairecollective-demo.js

<script type="text/javascript">
  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><div class="objects">';
      }

      html += '<div class="category">' + explain.title + '</div>';
      for (var j = 0; j < 2 && j < explain.subtitles.length; ++j) {
          html +=  '<div class="subcategory"><small><span class="text-muted">by </span>' + 
                   explain.subtitles[j].value + '</small></div>';
      }
      if (i == 0 && explain.subtitles.length == 0) {
        for (var j = 0; j < 2 && j < hit._highlightResult.brands.length; ++j) {
          html +=  '<div class="subcategory"><small><span class="text-muted">by </span>' + 
                   hit._highlightResult.brands[j].brand.value + '</small></div>';
        }
      }
      foundCats = true;
    }
    if (html !== '') {
      html += '</div>';
    }
    $('.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><div class="objects">';
      }

      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 + 
                   ' product' + (hit._highlightResult.cats[j].count > 1 ? 's' : '') + ')</small></div>';
        }
      }
    }
    if (html !== '') {
      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><div class="objects">';
        }
        html += '<div class="product">' +
          '<img src="//d3pkevt87ob17v.cloudfront.net/ecommerce/pictures/' + hit.objectID + '-1.jpg" />' +
          '<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>';
      }
      if (html !== '') {
        html += '<div class="product">See all ' + products.nbHits + ' product' + (products.nbHits > 1 ? 's' : '') + 
                ' matching <em>' + products.query + '</em></div>';
        html += '</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>

it'd be great to know how the search index was setup for such a store.
are the categories and brands indexed seperately or are they facets for the product index.
if it's the latter case, how do you attach multiple categories as a facet to a product record