Building an E-Commerce Store - Adding a Checkout Chapter 11<list-purchases />
</div>`,components: {
ListPurchases
}
};Open the ListPurchases component once more to start displaying the products. The
default state of this component will be to list the products in the basket, along with the
variation selected. The price for each product will be displayed, along with the price if the
quantity is more than one. Lastly, a grand total will be shown.
The first step is to get the basket list into our component. Create a computed object with a
products function. This should return the basket products:
const ListPurchases = {
name: 'ListPurchases',template: `<table></table>`,computed: {
products() {
return this.$store.state.basket;
}
}
};With the products in the basket now available to us, we can loop through them in the table
displaying the information required. This includes a thumbnail image, the product and
variation title, price, quantity, and the total price of the item. Add a header row to the table
too, so the user knows what the column is:
template: `<table>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products">
<td>
<img