The cart panel is a representation of the cart. It has a line for every product that is added, displaying the number of items, the name of the item type, the total price, and a button to remove it from the cart, as shown in the following screenshot:
We would like to add a line each time a new product is added to the cart, as shown in the following screenshot:
In this case, we do not need to modify the main layout as we are going to represent each line as a row with columns. The model of a line in the cart is shown in the following code:
case class CartLine(qty: Int, product: Product)
The HTML content of the cart is shown in the following code:
def content: Div = div(`class` := "row", id := s"cart-${product.code}-row")(
div(`class` := "col-1")(getDeleteButton),
div(`class` := "col-2")(getQuantityInput),
div(`class` := "col-6")(getProductLabel),
div(`class` := "col")(getPriceLabel)
).renderThe previous code is for a row with four columns. The code for the button to delete it...