Soaking Salts 4
{
const mq = window.matchMedia( '(max-width: 990px)' );
if (mq.matches) {
return
}
const queryString = new URLSearchParams(new FormData($refs.filter_form)).toString()
loading = true;
let queryWithSort = '?sort_by=' + sort + '&' + queryString
let filterUrl = '/collections/soaking-salts' + queryWithSort;
fetch(filterUrl)
.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.replaceState(null, null, '?sort_by=' + sort + '&' + queryString);
let paginationEl = document.querySelector('#product_pagination')
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
})
.catch(error => console.error('Error:', error))
.finally(() =>{
pageNum = 1
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;
let paginationEl = document.querySelector('#product_pagination')
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
// move promotion banner on position
// 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
pageNum = 1
});
})
"
@filter-apply.window="
$nextTick(() => {
const queryString = new URLSearchParams(new FormData($refs.filter_form)).toString()
loading = true;
let queryWithSort = '?sort_by=' + sort + '&' + queryString
let filterUrl = '/collections/soaking-salts' + queryWithSort;
fetch(filterUrl)
.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.replaceState(null, null, '?sort_by=' + sort + '&' + queryString);
let paginationEl = document.querySelector('#product_pagination')
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
})
.catch(error => console.error('Error:', error))
.finally(() =>{
pageNum = 1
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;
let paginationEl = document.querySelector('#product_pagination')
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
// move promotion banner on position
// 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
pageNum = 1
});
})
"
@filter-clear.window="
$nextTick(() => {
loading = true;
fetch('/collections/soaking-salts')
.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 paginationEl = document.querySelector('#product_pagination')
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(paginationEl) {
paginationEl.innerHTML = pagination_dom;
}
// update url without refreshing the page
history.pushState(null, null, '/collections/soaking-salts');
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString
pageNum = 1
loading = false
running_text()
});
})
"
>
Filter & Sort
- Choosing a selection results in a full page refresh.
- Opens in a new window.