Products
{
const PageMediaQuery = window.matchMedia('(max-width: 990px)')
let queryString;
if(PageMediaQuery.matches) {
queryString = new URLSearchParams(new FormData($refs.mobile_form)).toString();
} else {
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/all?` + 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;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
// 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/all`)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, '/collections/all');
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;
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;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
// 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;
showingProductsCount = document.querySelectorAll('.product-card').length
calculateProgressBarWidth(showingProductsCount)
//document.querySelector('#product_grid').innerHTML = html_dom;
if (html_div.querySelector('#product_pagination')){
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);
})
"
>