Building an E-Commerce Store - Browsing Products Chapter 10let variant = product.variationProducts.map(v => {
if(v.variant[key] && v.variant[key].handle == attribute) {
hasProperty[key] = true;
}
});
}
}if(Object.keys(hasProperty).every(key => hasProperty[key])) {
display = true;
}});return display;
}We now have a successful filtering product list. View your app in the browser and update
the filters – noting how products show and hide with each click. Note how even when you
press refresh, only the filtered products display.
Summary
In this chapter, we created a category listing page, allowing the user the view all the
products in a category. This list is able to be paginated, along with the order changing. We
also created a filtering component, allowing the user to narrow down the results.
With our products now browseable, filterable, and viewable, we can proceed on to making
a Cart and Checkout page.