From 66d5704505ce88939b4a6a9b6251ee8380f43d74 Mon Sep 17 00:00:00 2001
From: Marco Pantaleo <marco.pantaleo@neuland-bfi.de>
Date: Fri, 23 Feb 2024 20:53:05 +0100
Subject: [PATCH] Added price and total on cart page

---
 src/checkout/components/LineItem.js |  3 ++-
 src/checkout/pages/CartPage.css     |  6 ++++++
 src/checkout/pages/CartPage.js      | 10 ++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/checkout/components/LineItem.js b/src/checkout/components/LineItem.js
index 38e8527..7a658e0 100644
--- a/src/checkout/components/LineItem.js
+++ b/src/checkout/components/LineItem.js
@@ -1,6 +1,6 @@
 import { html } from "../utils.js";
 
-export default ({ sku, id, name, quantity, image }) => {
+export default ({ sku, id, name, quantity, price, image }) => {
   const url = `/product/${id}?sku=${sku}`;
   return html`<li class="c_LineItem">
     <a href="${url}" class="c_LineItem__image">
@@ -10,6 +10,7 @@ export default ({ sku, id, name, quantity, image }) => {
       <strong>${name}</strong><br />${sku}
     </a>
     <div class="c_LineItem__quantity">${quantity}</div>
+    <div class="c_LineItem__price">${price * quantity} Ø</div>
     <form action="/checkout/cart/remove" method="post">
       <input type="hidden" name="sku" value="${sku}" />
       <input type="submit" value="remove" />
diff --git a/src/checkout/pages/CartPage.css b/src/checkout/pages/CartPage.css
index 6925c07..1c4b890 100644
--- a/src/checkout/pages/CartPage.css
+++ b/src/checkout/pages/CartPage.css
@@ -7,3 +7,9 @@
   list-style: none;
   padding: 0;
 }
+
+.c_CartPage__total {
+  margin-top: 20px;
+  text-align: right;
+  font-weight: bold;
+}
diff --git a/src/checkout/pages/CartPage.js b/src/checkout/pages/CartPage.js
index df428f2..8455927 100644
--- a/src/checkout/pages/CartPage.js
+++ b/src/checkout/pages/CartPage.js
@@ -21,6 +21,16 @@ export default ({ req }) => {
       <ul class="c_CartPage__lineItems">
         ${lineItems.map(LineItem).join("")}
       </ul>
+      <hr />
+      <p class="c_CartPage__total">
+        Total:
+        ${lineItems.reduce(
+          (acc, { price, quantity }) => acc + price * quantity,
+          0,
+        )}
+        Ø
+      </p>
+
       <form action="/checkout/checkout" method="get">
         <button>checkout</button>
       </form>