The Lineup
{
const activeParams = [...activeFilters];
if (activeSort.value) {
activeParams.push({
key: 'sort_by',
value: activeSort.value,
});
}
if (activePage > 1) {
activeParams.push({
key: 'page',
value: activePage,
});
}
const filteredSortedUrl = `${window.location.pathname}${activeParams.length > 0 ? `?${activeParams.map(v => `${v.key}=${v.value}`).join('&')}` : ''}`;
const productGridDiv = '.product-grid-items';
const productGrid = $el.querySelector(productGridDiv);
$store.ajaxWorking = true;
fetch(filteredSortedUrl)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html');
// Update items
const productGridUpdated = html.querySelector(productGridDiv);
productGrid.innerHTML = productGridUpdated.innerHTML;
$store.ajaxWorking = false;
history.pushState({}, '', filteredSortedUrl);
// Scroll to top.
const scrollTop =
document.querySelector('.product-grid-items').getBoundingClientRect().top +
window.scrollY -
document.querySelector('.site-header').getBoundingClientRect().height - 40;
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
})
.catch((e) => {
console.error(e);
$store.ajaxWorking = false;
});
}"
@paginate="
activePage = $event.detail;
$dispatch('update');
"
@sort="
activeSort = $event.detail;
$dispatch('update');
"
@filter="
$dispatch('update');
">
Blazzberry
Blueberry × raspberry. Illegally good.
See details
Strawnana
Strawberry × banana. A power couple.
See details
Tropical Rainbow
Every flavor at once. Chaos.
See details
Watermelon
Summer in a bag. Seeds not included.
See details
Berry Blue
Blue tongue guaranteed.
See details
Summer Berry
Tastes like the last day of school.
See details
Mango
Sunshine with a kick.
See details
Cherry
Not cough syrup. Promise.
See details
Pickle
Yes, pickle. Trust the process.
See details
Pink Lemonade
Pucker up, buttercup.
See details
Blazzberry
Blueberry × raspberry. Illegally good.
See details
Strawnana
Strawberry × banana. A power couple.
See details
Tropical Rainbow
Every flavor at once. Chaos.
See details
Watermelon
Summer in a bag. Seeds not included.
See details
Berry Blue
Blue tongue guaranteed.
See details
Summer Berry
Tastes like the last day of school.
See details
Mango
Sunshine with a kick.
See details
Cherry
Not cough syrup. Promise.
See details
Pickle
Yes, pickle. Trust the process.
See details
Pink Lemonade
Pucker up, buttercup.
See details