Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
custom-header-menu.js
const search = instantsearch(/* parameters */);
const categoriesToShow = [
'hombres',
'mujeres',
'ninos',
'calzado',
'accesorios',
'marcas',
'reviews'
]
const makeMenu = instantsearch.connectors.connectMenu(
function(renderOpts, isFirstRendering) {
if (isFirstRendering) {
// add links into header
$('#header').html(
categoriesToShow.map(function(cat) {
return `<li>${cat}</li>`;
})
);
// bind click event to refine the category clicked
$('#header')
.find('li')
.each(function(index) {
$(this).on('click', function() {
renderOpts.refine(categoriesToShow[index]);
});
});
}
// add class `.active` on selected element
const refinedItem = renderOpts.items.find(function(item) { return item.isRefined });
$('#header')
.find('li')
.each(function() {
if ($(this).text() === refinedItem.value) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
);
const customMenu = makeMenu({
attributeName: 'category', // <- change the attributeName to your category field
});
search.addWidget(customMenu);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment