<section class="facets" id="facets" role="navigation">
<h1 class="facets__title">Filter results</h1>
<div class="facets__facets">
</div>
</section>
<script id="facets-group-template" type="text/template"></script>
<script id="facets-item-template" type="text/template"></script>
This component will show the facets of search results
In the example the facet is rendered in a column. You should do this yourself when implementing the facets.
To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the facets and the facets script itself.
Both scripts be placed in the Additional component(s) script
section as documented in How to use.
Look at the example to see how the data needs to be formatted that you can feed the facets script:
[
{
title: 'Document type',
facets: [
{ title: 'PDF document (10)', url: '#pdf', active: true },
{ title: 'Webpage (5)', callback: callbackFunction}
]
},
{
title: 'Date',
facets: [
{ title: 'Last week (7)' },
{ title: 'This week (3)' },
{ title: 'Today (5)' }
]
}
]
<script>
var facets = new Facets();
function facetClickHandler(event, $facetItem) {
if ($facetItem.hasClass('active')) {
$('#facets .facets__item').removeClass('active');
event.preventDefault();
return;
}
$('#facets .facets__item').removeClass('active');
$facetItem.addClass('active')
event.preventDefault();
}
$(document).ready(function () {
var facetData = [
{
title: 'Document type',
facets: [
{ title: 'Webpagina (5)' },
{ title: 'PDF document (10)' }
]
},
{
title: 'Datum',
facets: [
{ title: 'Vandaag (5)' },
{ title: 'Deze week (3)' },
{ title: 'Afgelopen week (7)' }
]
}
];
facets.init('#facets', facetClickHandler);
facets.show(facetData);
})
</script>
<script>
function Facets() {
this.$facets;
this.$facetsContainer;
this.facetGroupTemplate;
this.facetItemTemplate;
this.globalCallback = null;
}
Facets.prototype.init = function (selector, globalCallback) {
this.$facets = $(selector);
this.$facetsContainer = $('.facets__facets', this.$facets);
this.$facetsContainer.addClass('hide');
this.globalCallback = globalCallback;
this.facetGroupTemplate = $.parseHTML($('#facets-group-template').html());
this.facetItemTemplate = $.parseHTML($('#facets-item-template').html());
$('.facets__title', this.$facets).click(this.clickHandler.bind(this));
}
Facets.prototype.clickHandler = function () {
var $title = $('.facets__title', this.$facets);
if ($title.hasClass('expanded')) {
$title.removeClass('expanded');
this.$facetsContainer.removeClass('expanded');
} else {
$title.addClass('expanded');
this.$facetsContainer.addClass('expanded');
}
}
Facets.prototype.show = function (facets) {
this.$facetsContainer.html('');
for (var groupKey in facets) {
var facetGroup = facets[groupKey];
var $facetGroup = $(this.facetGroupTemplate).clone();
$('.facets__group-title', $facetGroup).html(facetGroup.title);
for (var itemKey in facetGroup.facets) {
var facetItem = facetGroup.facets[itemKey];
var $facetItem = $(this.facetItemTemplate).clone();
$('.facets__link', $facetItem).html(facetItem.title);
if (facetItem.url) {
$('.facets__link', $facetItem).attr('href', facetItem.url)
}
if (facetItem.callback || this.globalCallback) {
var callback = facetItem.callback ? facetItem.callback : this.globalCallback;
$('.facets__link', $facetItem).click(
(function ($facetItem, facetItem) {
return function (event) {
callback(event, $facetItem, facetItem);
}
})($facetItem, facetItem)
)
}
if (facetItem.active) {
$facetItem.addClass('active');
}
$('.facets__list', $facetGroup).append($facetItem);
}
this.$facetsContainer.append($facetGroup);
}
}
</script>