generate initial price for payment summary

Author: ibrahimmoalim

basic-projects/amazon-project/checkout.html

@@ -47,39 +47,8 @@
           <!-- generated in js -->
         </div>
 
-        <div class="payment-summary">
-          <div class="payment-summary-title">
-            Order Summary
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Items (3):</div>
-            <div class="payment-summary-money">$42.75</div>
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Shipping &amp; handling:</div>
-            <div class="payment-summary-money">$4.99</div>
-          </div>
-
-          <div class="payment-summary-row subtotal-row">
-            <div>Total before tax:</div>
-            <div class="payment-summary-money">$47.74</div>
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Estimated tax (10%):</div>
-            <div class="payment-summary-money">$4.77</div>
-          </div>
-
-          <div class="payment-summary-row total-row">
-            <div>Order total:</div>
-            <div class="payment-summary-money">$52.51</div>
-          </div>
-
-          <button class="place-order-button button-primary">
-            Place your order
-          </button>
+        <div class="payment-summary js-payment-summary">
+          
         </div>
       </div>
     </div>

basic-projects/amazon-project/data/cart.js

@@ -52,6 +52,7 @@ export function calculateCartQuantity(){
   cart.forEach((cartItem) => {
     cartQuantity += cartItem.quantity;
   })
+  saveToStorage();
   return cartQuantity;
 };
 

basic-projects/amazon-project/scripts/checkout.js

@@ -1,3 +1,5 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
+import { renderPaymentSummary } from "./checkout/payment-summary.js";
 
+renderPaymentSummary()
 renderOrderSummary();

basic-projects/amazon-project/scripts/checkout/orderSummary.js

@@ -178,9 +178,7 @@ export function renderOrderSummary(){
     .forEach((link) => {
       const {itemId} = link.dataset;
       link.addEventListener('click', () => {
-
         saveUpdatedQuantity(itemId);
-        
       })
     });
 

basic-projects/amazon-project/scripts/checkout/payment-summary.js

@@ -0,0 +1,67 @@
+import { cart, calculateCartQuantity } from "../../data/cart.js"
+import { products } from "../../data/products.js";
+import formatCurrency from "../utils/price.js";
+
+
+
+
+
+let itemsPrice = 0;
+
+cart.forEach((cartItem) => {
+    // get productId out of cartItem
+    const {productId} = cartItem;
+
+    let matchingProduct;
+    // get the full product just using id
+    products.forEach((product) => {
+      if (product.id === productId){
+        matchingProduct = product;
+      }
+    });
+    itemsPrice += Number(formatCurrency(matchingProduct.priceCents * cartItem.quantity))
+  });    
+
+export function renderPaymentSummary(){
+
+
+  document.querySelector('.js-payment-summary')
+    .innerHTML = `
+
+      <div class="payment-summary-title">
+        Order Summary
+      </div>
+
+      <div class="payment-summary-row">
+        <div>Items (${calculateCartQuantity()}):</div>
+        <div class="payment-summary-money">$${itemsPrice}</div>
+      </div>
+
+      <div class="payment-summary-row">
+        <div>Shipping &amp; handling:</div>
+        <div class="payment-summary-money">$4.99</div>
+      </div>
+
+      <div class="payment-summary-row subtotal-row">
+        <div>Total before tax:</div>
+        <div class="payment-summary-money">$47.74</div>
+      </div>
+
+      <div class="payment-summary-row">
+        <div>Estimated tax (10%):</div>
+        <div class="payment-summary-money">$4.77</div>
+      </div>
+
+      <div class="payment-summary-row total-row">
+        <div>Order total:</div>
+        <div class="payment-summary-money">$52.51</div>
+      </div>
+
+      <button class="place-order-button button-primary">
+        Place your order
+      </button>
+
+    `
+
+  
+}