{
this.loading = true;
const queryString = new URLSearchParams(new FormData($refs.form_filter)).toString();
let url = '/collections/cyber?' + queryString;
fetch(url)
.then(response => response.text())
.then(data => {
let div = document.createElement('div');
div.innerHTML = data;
const products = div.querySelector('#ProductGridContainer').innerHTML;
const activeFilters = div.querySelector('#ActiveFilters').innerHTML;
if(div.querySelector('#Pagination')){
pagination = div.querySelector('#Pagination').innerHTML;
}
document.querySelector('#ProductGridContainer').innerHTML = products;
document.querySelector('#ActiveFilters').innerHTML = activeFilters;
if(document.querySelector('#Pagination')){
document.querySelector('#Pagination').innerHTML = pagination;
}
history.replaceState(null,null, url);
})
.catch((error) => console.error('Error: ', error))
.finally(() => this.loading = true)
});"
aria-labelledby="slide-over-title"
role="dialog"
aria-modal="true"
>