{
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
loading = true;
fetch('/collections/oat-free?sort_by=' + sort + '&' + 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;
let productOnThepage = document.querySelectorAll('.poord-card-item-product').length
products_on_page(productOnThepage)
calculateProgressBarWidth()
// update url without refreshing the page
history.replaceState(null, null, '?sort_by=' + sort + '&' + queryString);
})
.catch(error => console.error('Error:', error))
.finally(() => 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;
// move promotion banner on position
let productOnThepage = document.querySelectorAll('.poord-card-item-product').length
showingProductsCount = productOnThepage
products_on_page(productOnThepage)
calculateProgressBarWidth();
// update url without refreshing the page
history.pushState(null, null, $event.detail.new_url);
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString
loading = false
});
})
"
@filter-clear.window="
$nextTick(() => {
loading = true;
fetch('/collections/oat-free')
.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 productOnThepage = html_div.querySelectorAll('.poord-card-item-product').length
showingProductsCount = productOnThepage
products_on_page(productOnThepage)
calculateProgressBarWidth();
// update url without refreshing the page
history.pushState(null, null, '/collections/oat-free');
})
.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;
let paginationEl = document.querySelector('#product_pagination')
const button = document.querySelector('#product_pagination .button');
const href = button.getAttribute('href');
const url = new URL(href, window.location.origin);
console.log(url)
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('.poord-card-item-product').length
calculateProgressBarWidth()
document.querySelectorAll('.promotion-card').forEach((element, index) => {
if(index > 0) {
element.classList.add('hidden')
}
})
products_on_page(showingProductsCount)
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
>
No products found
- Choosing a selection results in a full page refresh.
- Opens in a new window.