product.url)
.sort((a, b) => {
if (this.sortBy === "price-high-low") return Number(b.price.slice(1)) - Number(a.price.slice(1));
if (this.sortBy === "price-low-high") return Number(a.price.slice(1)) - Number(b.price.slice(1));
return 0;
})
.slice((this.currentPage - 1) * this.productsPerPage, this.productsPerPage * this.currentPage);
return a;
},
goToNextPage() {
const page = this.currentPage + 1;
this.currentPage = page;
window.history.pushState(null, "", `?currentPage=${page}`);
},
goToPreviousPage() {
const page = this.currentPage - 1;
this.currentPage = page;
window.history.pushState(null, "", page === 1 ? "?" : `?currentPage=${page}`)
},
async init() {
const catalogs = await getCatalogs();
const urlSearchParams = new URLSearchParams(window.location.search);
const page = urlSearchParams.get("currentPage");
this.currentPage = page ? Number(page) : 1;
const catalog = catalogs.find(c => c.handle === "wear");
const category = catalog.categories.find(c => c.handle === "shoes");
const allProducts = [...category.product_collections, ...category.products];
const allThemedCollections = category.themed_collections;
this.products = [...allProducts]
.reverse()
.filter((product, index, reversedProducts) => reversedProducts.slice(index + 1).find(p => p.handle === product.handle) === undefined)
.reverse();
this.themedCollections = allThemedCollections;
if (this.currentPage === 1) {
this.productsPerPage = this.productsPerPage - this.themedCollections.length;
}
$watch("currentPage", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
$watch("sortBy", () => {
this.currentPage = 1;
});
// this way on popstate, page will not jump to the pagination buttons
history.scrollRestoration = "manual";
window.addEventListener("popstate", () => {
const urlSearchParams = new URLSearchParams(window.location.search);
const page = urlSearchParams.get("currentPage");
this.currentPage = page ? Number(page) : 1;
})
$refs.collectioncontainer.style.minHeight = "unset";
},
}">
