Building an E-Commerce Store - Browsing Products Chapter 10With our empty object created, we can now loop through the variationProducts on the
product object. For each one, we can access the variant with the handle of the current
variation. From there, we can use our addTopic method to include the value (for example,
Blue or XL) within the filters:
Object.keys(product.variationTypes).forEach(vkey => {
let variation = product.variationTypes[vkey];if(!this.topics.hasOwnProperty(variation.handle)) {
this.topics[variation.handle] = {
...variation,
checked: [],
values: {}
}
}Object.keys(product.variationProducts).forEach(pkey => {
let variationProduct = product.variationProducts[pkey];this.addTopic(
this.topics[variation.handle],
variationProduct.variant[variation.handle],
product.handle
);
});});We do need to update our addTopic method, however. This is because the dynamic
properties have a value, instead of a title.
Add an if statement to your addTopic method to check whether a value exists, if it does
- set it to the title:
addTopic(category, item, handle) {
if(item.handle) {if(category.values[item.handle]) {
if(!category.values[item.handle].count.includes(handle)) {
category.values[item.handle].count.push(handle);
}
} else {if(item.hasOwnProperty('value')) {
item.title = item.value;
}