{
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
const index = selectedFilters.indexOf($event.target.value);
if (index > -1) { // only splice array when item is found
selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
}else{
selectedFilters.push($event.target.value.trim())
}
if (!queryString.includes('availability')){
query = queryString + '&filter.v.availability=1'
}else{
query = queryString
}
loading = true;
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
if (!selectedFilters.length){
query = ''
}
fetch(`/collections/face-masks?` + query)
.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, '?' + query);
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) => {
details.open=window.matchMedia('(min-width: 990px)').matches;
})
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;
selectedFilters = []
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
fetch(`/collections/face-masks`)
.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/face-masks');
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;
console.log(selectedFilters)
const index = selectedFilters.indexOf($event.target.getAttribute('data-selected-filter-value'));
if (index > -1) { // only splice array when item is found
selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
}
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
let fetchUrl = ''
if (!selectedFilters.length){
fetchUrl = $event.detail.new_url.split('?').slice(0, -1)[0]
}else{
fetchUrl = $event.detail.new_url
}
fetch(fetchUrl)
.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, fetchUrl);
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 => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
const button = document.querySelector('#product_pagination .button');
const href = button.getAttribute('href');
const url = new URL(href, window.location.origin);
const pageValue = url.searchParams.get('page');
if(pageValue && parseInt(pageValue) === parseInt(button.getAttribute('data-total-pages'))) {
document.querySelector('#product_pagination').style.display = 'none';
}
let html_dom = html_div.querySelector('#product_grid').innerHTML;
document.querySelector('#product_grid').innerHTML += html_dom;
//document.querySelector('#product_grid').innerHTML = html_dom;
let unicTitles = document.querySelectorAll('.product-grid-item');
let unicResults = [];
unicTitles.forEach(unic => {
if (!unicResults.includes(unic.getAttribute('data-swatch-collection-handle'))) {
unicResults.push(unic.getAttribute('data-swatch-collection-handle'));
}
else {
unic.style.display = 'none';
}
});
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(document.querySelector('#product_pagination')) {
document.querySelector('#product_pagination').innerHTML = pagination_dom;
}
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;
}
});
elements.forEach(element => {
element.style.minHeight = maxHeight + 'px';
});
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
>