Algolia + Hierarchical Disjunctive Refinements & Multi-Facets
JavaScript code handling display of hierarchical disjunctive categories faceting.
HTML
<script src="http://cdn.jsdelivr.net/algoliasearch/latest/algoliasearch.min.js"></script>
<ul id="facets"></ul>
<hr />
index configuration:
<pre>
{
"attributesToIndex": ["name"],
"attributesForFaceting: ["category_level1", category_level2", "category_level3"]
}
</pre>
records:
<pre>
{
"name" : "Velvet Gloss Lip Pencil",
"category_level1" : ["Makeup", "Accessories"],
"category_level2" : ["Makeup / Lips", "Accessories / Lips"],
"category_level3" : ["Makeup / Lips / Lip Gloss", "Accessories / Lips / Pencils"],
"objectID" : 1
}
{
"name" : "Super-Saturated Lip Gloss",
"category_level1" : ["Makeup"],
"category_level2" : ["Makeup / Lips"],
"category_level3" : ["Makeup / Lips / Lip Gloss"],
"objectID" : 2
}
{
"name" : "Buxom Full-On Lip Polish",
"category_level1" : ["Makeup"],
"category_level2" : ["Makeup / Lips"],
"category_level3" : ["Makeup / Lips / Lip Plumper"],
"objectID" : 3
}
{
"name" : "No Blush Blush",
"category_level1" : ["Makeup"],
"category_level2" : ["Makeup / Face"],
"category_level3" : ["Makeup / Face / Blush"],
"objectID" : 4
}
</pre>
CSS
body {
font-family: Arial;
}
.is-refined {
font-weight: bold;
}
JavaScript
// init
var algolia = new AlgoliaSearch("YE0A9ATLJG", "1abceba46dace8485375bc325f0144b5");
var query = 'velv'; // $('input#q');
var refinements = {};
// handle category refinement
window.toggleRefine = function(level, value) {
var facet = 'category_level' + level;
if (refinements[facet] === value) {
// delete current + nested refinements
for (var i = level; i <= 3; ++i) {
delete refinements['category_level' + i];
}
} else {
refinements[facet] = value;
}
search();
};
function search() {
var params = {}; // FIXME: your other refinements/query parameters (warning: you may need to merge your facetFilters, otherwise they will be overriden)
var hitsParams = $.extend({ facets: '*', hitsPerPage: 10, facetFilters: [] }, params);
var facetOnlyParams = $.extend({ maxValuesPerFacet: 100, hitsPerPage: 1, attributesToRetrieve: [], attributesToHighlight: [] }, params);
// setup facets
algolia.startQueriesBatch();
//// always display the 1st level
algolia.addQueryInBatch("test_hierarchical_multi_facets", query, $.extend({ facets: 'category_level1' }, facetOnlyParams));
//// display the 2nd level if the 1st one is refined
if (refinements['category_level1']) {
// the 2nd level uses a query refining on 1st level
algolia.addQueryInBatch("test_hierarchical_multi_facets", query, $.extend({ facets: 'category_level2', facetFilters:[
"category_level1:" + refinements['category_level1']
] }, facetOnlyParams));
hitsParams.facetFilters.push("category_level1:" + refinements['category_level1']);
}
//// display the 3rd level if the 2nd one is refined
if (refinements['category_level2']) {
// the 3rd level uses a query refining on 1st+2nd level
algolia.addQueryInBatch("test_hierarchical_multi_facets", query, $.extend({ facets: 'category_level3', facetFilters:[
"category_level1:" +...