Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Building an E-Commerce Store - Browsing Products Chapter 10

});

} else {
hasProperty[key] = false;

let variant = product.variationProducts.map(v => {
if(v.variant[key] && v.variant[key].handle == attribute) {
hasProperty[key] = true;
}
});
}
}
});

return display;
}

Lastly, we need to check each of the properties of the hasProperty object. If all the values


are set to true, we can set the display of the product to true – meaning it will show. If one


of them is false, the product will not show as it does not match all of the criteria:


filtering(product, query) {
let display = false,
hasProperty = {};

Object.keys(query).forEach(key => {
let filter = Array.isArray(query[key])? query[key] : [query[key]];

for(attribute of filter) {
if(key == 'vendor') {

hasProperty.vendor = false;
if(product.vendor.handle == attribute) {
hasProperty.vendor = true;
}

} else if(key == 'tags') {
hasProperty.tags = false;

product[key].map(key => {
if(key.handle == attribute) {
hasProperty.tags = true;
}
});

} else {
hasProperty[key] = false;
Free download pdf