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 - Adding a Checkout Chapter 11

Instead, we need to loop through each product in the basket and add the quantities

together. Create a variable called quantity and set it to 0. Loop through the basket items

and add the item.quantity variable to the quantity variable. Lastly, return our variable

with the right sum:

cartQuantity: (state) => {

let quantity = 0;

for(let item of state.basket) {

quantity += item.quantity;

}

return quantity;

}

Navigate to the app and add some items to your basket to verify the basket count is being
calculated correctly.

Finalizing the Shop Vue-router URLs

We're now at a stage where we can finalize the URLs for our shop - including creating the
redirects and Checkout links. Referring back to Chapter 8, Introducing Vue-Router and

Loading URL-Based Components, we can see which ones we are missing. These are:

/category -redirect to /

/product - redirect to /

/basket - load OrderBasket component

/checkout- load OrderCheckout component

/complete- load OrderConfirmation component

Create the redirects in the appropriate places within the routes array. At the bottom of the

routes array, create three new routes for the Order components:

routes: [

{

path: '/',

name: 'Home',

...

},

{

path: '/category',

redirect: {name: 'Home'}

},

{

path: '/category/:slug',