{
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/mens-and-womens-sale?` + 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/mens-and-womens-sale`)
.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/mens-and-womens-sale');
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(() => {
loading = true;
fetch($event.detail.new_url)
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const newDoc = parser.parseFromString(data, 'text/html');
const currentGrid = document.querySelector('#product_grid');
const newGrid = newDoc.querySelector('#product_grid');
if (!currentGrid || !newGrid) return;
const newItems = Array.from(newGrid.children);
newItems.forEach((item) => {
currentGrid.appendChild(item.cloneNode(true));
});
const currentPagination = document.querySelector('#product_pagination');
const newPagination = newDoc.querySelector('#product_pagination');
if (currentPagination) {
if (newPagination) {
currentPagination.innerHTML = newPagination.innerHTML;
const newButton = currentPagination.querySelector('.button');
if (newButton) {
const href = newButton.getAttribute('href');
const totalPages = parseInt(newButton.getAttribute('data-total-pages'), 10);
if (href) {
const url = new URL(href, window.location.origin);
const pageValue = parseInt(url.searchParams.get('page') || '1', 10);
if (pageValue > totalPages) {
currentPagination.style.display = 'none';
} else {
currentPagination.style.display = '';
}
}
} else {
currentPagination.style.display = 'none';
}
} else {
currentPagination.style.display = 'none';
}
}
reInitCollectionCards();
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
>