Defining the layout
For the purpose of this book, the shopping cart is designed as shown in the following screenshot:
On the left-hand side, a panel lists all of the products with all of their details. Underneath, a button adds the product to the cart. On the right-hand panel, there is a list of all of the products that have been added to the cart. On the Cart Panel, the number of products can be changed by clicking on the number and entering the right number. Each line has a button to delete the product from the list.