Checkout and Item Rendering

CheckoutView component

The second-to-last component that we will need is the CheckoutView component. Remember that this component is displayed by the ShoppingCart component when the user clicks on the “CHECKOUT” button. There is nothing unusual about this component other than that the template uses a table to display the items in the shopping cart and has a number of computed properties. Again, in the interest of brevity, we will not show the entire template for this component; please refer to the sample code for this.

Our CheckoutView component calculates a few values. The first of these values is the total amount of all items that are in the shopping cart, as follows: