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

Building an E-Commerce Store - Browsing Products Chapter 10

let product = payload[key],

type = product.hasOwnProperty('type')? product.type : other;

if(!categories.hasOwnProperty(type.handle)) {

categories[type.handle] = {

title: type.title,

handle: type.handle,

products: []

}

}

categories[type.handle].products.push(product.handle);

});

Object.keys(categories).forEach(key => {

let category = categories[key];

if(category.products.length < 3) {

categories.other.products =

categories.other.products.concat(category.products);

delete categories[key];

}

});

let categoriesSorted = {}

Object.keys(categories).sort().forEach(key => {

categoriesSorted[key] = categories[key]

});

state.categories = categoriesSorted;

}

With that, we can now add a list of categories to our HomePage template. For this, we'll

create named router-view components – allowing us to put things in the sidebar of the

shop on selected pages.

Displaying the categories

With our categories stored, we can now proceed with creating our ListCategories

component. We want to display our category navigation in a sidebar on the home page,
and also on a shop category page. As we want to show it in several places, we have a

couple of options as to how we display it.