I have a working "proof of concept" where I add a search box to a list of facet options, this way if there are more than x options the user can easily find and check them.
Right now I'm just adding the needed javascript to the Swift_ProductListFacets.cshtml
I have read https://doc.dynamicweb.com/swift/customization#sideNavTitle1-6 but I'm still not quite sure what a more gracefull way of adding this function would be ?
Here's the script:
document.addEventListener('DOMContentLoaded', function() {
var parent = document.body; // replace 'body' with a closer parent element if possible
parent.addEventListener('input', function(event) {
var input = event.target;
if (input.classList.contains('filter-search')) {
var searchValue = input.value.toLowerCase();
var filterOptions = input.parentElement.querySelectorAll('.form-check-label');
filterOptions.forEach(function(option) {
var filterOption = option.textContent.toLowerCase();
if (filterOption.includes(searchValue)) {
option.closest('.form-check').style.display = 'block';
} else {
option.closest('.form-check').style.display = 'none';
}
});
}
});
});
