I’m using HikaShop to build a webshop. For the filters i created a bootstrap accordion with radio buttons to select a filter to filter my products. Each accordion content card looks like the following:
<div class="col">
<div class="multi-collapse collapse show" id="multiCollapseExample0" style="">
<div class="card card-body">
<div class="content" style="min-height:100px; float:left; width:99%;">
<div class="hikashop_filter_Accessoires_7"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="45" id="filter_7_45_module_108"><label class="filter_7_45_module_108" for="filter_7_45_module_108">Accessoires</label><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="47" id="filter_7_47_module_108"><label class="filter_7_47_module_108" for="filter_7_47_module_108">Miners op voorraad</label></span><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="52" id="filter_7_52_module_108"><label class="filter_7_52_module_108" for="filter_7_52_module_108">Pre-order</label></span><br><span class="hikashop_filter_checkbox"><input onchange="window.hikashop.refreshFilters(this);" data-container-div="hikashop_filter_form_module_108" name="filter_Accessoires_7" type="radio" value="53" id="filter_7_53_module_108"><label class="filter_7_53_module_108" for="filter_7_53_module_108">Combo deals</label></span><br></div> </div>
</div>
</div><br>
</div>
</div>
Whenever you select a filter it will execute the function ‘refreshFilters’ which looks like the following:
refreshFilters: function (el, skipSelf) {
"use strict";
var d = document, t = this, o = window.Oby,
container = null, data = null, containerName = el.getAttribute('data-container-div');
if(containerName)
container = d.forms[containerName];
if(!container)
return false;
var url = container.getAttribute('action');
var scrollToTop = container.getAttribute('data-scroll');
// delay timer to avoid too many ajax calls
if(t.filterRefreshTimer !== false) clearTimeout(t.filterRefreshTimer);
t.filterRefreshTimer = setTimeout(function() {
data = o.getFormData(container);
data += '&tmpl=raw';
o.xRequest(url, {mode:'POST', data: data}, function(xhr) {
var resp = o.evalJSON(xhr.responseText);
if(resp.newURL) {
var urlInHistory = resp.newURL.replace('tmpl=raw&', '', 'g').replace('filter=1&', '', 'g').replace('&tmpl=raw', '', 'g').replace('&filter=1', '', 'g');
window.history.pushState(data, d.title, urlInHistory);
window.addEventListener('popstate', function(e) {
if(window.location.href.includes('hikashop_url_reload=1')) {
window.location.href.replace('&hikashop_url_reload=1','').reload();
}
});
}
var refreshAreas = document.querySelectorAll('.filter_refresh_div');
var triggers = o.fireAjax('filters.update', {el: el, refreshAreas : refreshAreas, resp: resp});
if(triggers !== false && triggers.length > 0)
return true;
var refreshUrl = null;
t.refreshCounter = 0;
for(let i = 0; i < refreshAreas.length; i++) {
var currentArea = refreshAreas[i];
if(skipSelf && currentArea.querySelector('#'+el.id))
continue;
if(resp.newURL && currentArea.getAttribute('data-use-url')) {
refreshUrl = resp.newURL;
} else {
refreshUrl = currentArea.getAttribute('data-refresh-url');
if(resp.params) {
refreshUrl += '&' + resp.params + '&return_url=' + encodeURIComponent(window.location.href);
}
}
if(!refreshUrl)
continue;
t.refreshCounter++;
var className = currentArea.getAttribute('data-refresh-class');
if(className) o.addClass(currentArea, className);
t.refreshOneArea(refreshUrl, currentArea, el, refreshAreas, resp);
}
if(scrollToTop) {
window.hikashop.smoothScroll();
}
});
t.filterRefreshTimer = false;
}, 300);
return false;
}
Executing this function means for the accordion to collapse. Is there any way i can prevent this from happening?