Added price and total on cart page

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" />

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;
+}

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>