{
console.log($event.detail.page);
fetch($event.detail.page)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('.products-grid').innerHTML;
document.querySelector('.products-grid').innerHTML = html_dom;
// update url without refreshing the page
history.replaceState(null, null, $event.detail.page);
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})"
@filter-updated="$nextTick(() => {
const queryString = new URLSearchParams(new FormData($refs.filter_form)).toString()
const queryStringF = window.location.search;
const urlParams = new URLSearchParams(queryString);
const urlParamsF = new URLSearchParams(queryStringF);
loading = true;
if (urlParamsF.has('sort_by') && !urlParamsF.has('q')) {
const sorted = urlParamsF.get('sort_by');
fetch('/collections/types?sort_by=' + sorted + '&' + queryString)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('.products-grid').innerHTML;
document.querySelector('.products-grid').innerHTML = html_dom;
// update url without refreshing the page
history.replaceState(null, null, '?sort_by=' + sorted + '&' + queryString);
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
} else if ( window.location.href.indexOf('types') > -1 && urlParamsF.has('q')) {
const collectionType = urlParamsF.get('q')
fetch('/collections/types?q=' + collectionType + '&' + queryString)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('.products-grid').innerHTML;
document.querySelector('.products-grid').innerHTML = html_dom;
// update url without refreshing the page
history.replaceState(null, null, 'types?q=' + collectionType + '&' + queryString);
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
} else {
fetch('/collections/types?' + queryString)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('.products-grid').innerHTML;
document.querySelector('.products-grid').innerHTML = html_dom;
// update url without refreshing the page
history.replaceState(null, null, '/collections/types/?' + queryString);
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
}
})"
>
T-Shirt
Sort by