Skip to content

Instantly share code, notes, and snippets.

@seafoox
Last active October 24, 2016 18:59
Show Gist options
  • Save seafoox/48e20a9925e445012fb6 to your computer and use it in GitHub Desktop.
Save seafoox/48e20a9925e445012fb6 to your computer and use it in GitHub Desktop.
Algolia - VestaireCollective demo
<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>
@kitwalker12
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment