{
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString
loading = true;
fetch(`/${this.urlParams.pathname.split('/')[1] === 'fr' ? this.urlParams.pathname.split('/')[1] + '/' : ''}collections/tree-dasher-2?` + 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 url without refreshing the page
history.pushState(null, null, '?' + queryString);
if ($event.target.checked){
currentColor.push($event.target.value)
}else{
const indexToRemove = currentColor.indexOf($event.target.value);
if (indexToRemove !== -1) {
currentColor.splice(indexToRemove, 1);
}
}
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = false
} else {
details.open = false
}
})
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => {
const height = element.clientHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
if (window.innerWidth <= 991){
elements.forEach(element => {
element.style.minHeight = maxHeight + 'px'
});
}
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
@filter-clear.window="
$nextTick(() => {
loading = true;
fetch(`/${this.urlParams.pathname.split('/')[1] === 'fr' ? this.urlParams.pathname.split('/')[1] + '/' : ''}collections/tree-dasher-2`)
.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 url without refreshing the page
history.pushState(null, null, '/collections/tree-dasher-2');
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = true
} else {
details.open = false
}
})
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => {
const height = element.clientHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
if (window.innerWidth <= 991){
elements.forEach(element => {
element.style.minHeight = maxHeight + 'px'
});
}
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString
loading = false
});
})
"
@filter-push.window="
$nextTick(() => {
loading = true;
fetch($event.detail.new_url)
.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 url without refreshing the page
history.pushState(null, null, $event.detail.new_url);
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = true
} else {
details.open = false
}
})
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => {
const height = element.clientHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
if (window.innerWidth <= 991){
elements.forEach(element => {
element.style.minHeight = maxHeight + 'px'
});
}
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString
loading = false
});
})
"
@filter-more.window="
$nextTick(() => {
if (loading) return;
loading = true;
fetch($event.detail.new_url)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
const currentGrid = document.querySelector('#product_grid');
const fetchedGrid = html_div.querySelector('#product_grid');
const currentPagination = document.querySelector('#product_pagination');
const fetchedPagination = html_div.querySelector('#product_pagination');
if (currentGrid && fetchedGrid) {
currentGrid.insertAdjacentHTML('beforeend', fetchedGrid.innerHTML);
}
if (currentPagination) {
if (fetchedPagination && fetchedPagination.innerHTML.trim() !== '') {
currentPagination.innerHTML = fetchedPagination.innerHTML;
currentPagination.style.display = '';
} else {
currentPagination.remove();
}
}
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = true;
} else {
details.open = false;
}
});
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach((element) => {
element.style.minHeight = '';
const height = element.clientHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
if (window.innerWidth <= 991) {
elements.forEach((element) => {
element.style.minHeight = maxHeight + 'px';
});
}
document.dispatchEvent(new CustomEvent('products:loaded')); })
.catch(error => console.error('Error:', error))
.finally(() => {
loading = false;
});
})
"
>