{
let form = $refs.filter_form;
const queryString = new URLSearchParams(new FormData(form)).toString();
show=true;
loading = true;
fetch('/collections/shoes?' + queryString)
.then(response => response.text())
.then(data=> {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('#productGridContainer').innerHTML;
document.querySelector('#productGridContainer').innerHTML = html_dom;
// update filter status on side bar
let html_filter_header = html_div.querySelector('#filter-header').innerHTML;
document.querySelector('#filter-header').innerHTML = html_filter_header;
// update filter status on page
let html_filter_header_only = html_div.querySelector('.filter-section-status').innerHTML;
document.querySelector('#filter-header-status').innerHTML = html_filter_header_only;
// update url without refreshing the page
history.replaceState(null, null, '?' + queryString);
})
.catch(error=>console.error('Error:',error))
.finally((e)=>{loading=false; show=true;});
})
" style="display: none;">