{
$nextTick(async () => {
const searchParams = new URLSearchParams(new FormData($refs.filterForm))
if (searchParams.get('filter.v.price.lte') == 55) {
searchParams.delete('filter.v.price.lte')
}
if (searchParams.get('filter.v.price.gte') == 0) {
searchParams.delete('filter.v.price.gte')
}
searchParams.set('page', 1);
page = 1;
searchParams.set('sort_by', sort_by);
const queryString = event.detail.removeUrl ? event.detail.removeUrl.split('?')[1] : searchParams.toString();
try {
loading = true;
const resp = await fetch('/collections/tie-dye?sort_by&' + queryString)
const html = await resp.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
$refs.prods.innerHTML = doc.querySelector('#prods').innerHTML;
$refs.filterForm.innerHTML = doc.querySelector('#filterForm').innerHTML;
$refs.toolbar.innerHTML = doc.querySelector('#toolbar').innerHTML;
history.replaceState(null, null, '?' + queryString);
} catch (error) {
console.log(error);
} finally {
loading = false;
}
});
}
"
@load-more.window="
(event) => {
$nextTick(async() => {
pages = $refs.pages.getAttribute('x-pages');
if (page >= pages) {
return;
}
page = page + 1;
const searchParams = new URLSearchParams(new FormData($refs.filterForm))
searchParams.set('page', page);
try {
loadingMore = true;
const resp = await fetch('/collections/tie-dye?sort_by&' + searchParams.toString())
const html = await resp.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const prodsFragment = document.createDocumentFragment();
const prodsDiv = doc.querySelector('#prods');
prodsDiv.childNodes.forEach(childNode => {
// Clone each child node and append to the fragment
prodsFragment.appendChild(childNode.cloneNode(true));
});
// Append the cloned nodes to the existing container
$refs.prods.appendChild(prodsFragment);
} catch (error) {
console.log(error);
} finally {
loadingMore = false;
}
});
}
"
x-ref="container"
>
Filters
Apply filters to table data.