Building an E-Commerce Store - Adding a Checkout Chapter 11Create the removeItem method. This method should filter the basket array, only
returning the objects that don't match the SKU passed in. Once the result is filtered, pass the
result to the same mutation we used in the updateQuantity() method:
removeItem(sku) {
let products = this.products.filter(p => {
if(p.sku != sku) {
return p;
}
});
this.$store.commit('updatePurchases', products);
}One last enhancement we can make is to trigger the removeItem method if the quantity is
set to 0. Within the updateQuantity method, check the value before looping through the
products. If it is 0 , or doesn't exist, run the removeItem method - passing the SKU through:
updateQuantity(e, sku) {
if(!parseInt(e.target.value)) {
this.removeItem(sku);
} else {
let products = this.products.map(p => {
if(p.sku == sku) {
p.quantity = parseInt(e.target.value);
}
return p;
});this.$store.commit('updatePurchases', products);
}
},Completing the shop SPA
The last step is to add a link from the OrderBasket component to the OrderCheckout
page. This can be done by linking to the Checkout route. With that, your checkout is
complete, along with your shop! Add the following link to the basket:
template: `<div>
<h1>Basket</h1>
<list-purchases :editable="true" />
<router-link :to="{name: 'Checkout'}">Proceed to Checkout</router-link>
</div>`,