generate html for delivery options

Author: ibrahimmoalim

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

@@ -1,22 +1,12 @@
-// named export, used when there are multiple exports in the file
-export let cart = JSON.parse(localStorage.getItem('cart'));
-
-if (!cart){
-  cart = [{
-  productId: '83d4ca15-0f35-48f5-b7a3-1ea210004f2e',
-  quantity: 2
-},
-{
-  productId: '54e0eccd-8f36-462b-b68a-8182611d9add',
-  quantity: 4
-}];
-}
+import deliveryOptions from '../data/delivery-options.js';
 
+// named export, used when there are multiple exports in the file
+export let cart = JSON.parse(localStorage.getItem('cart')) || [];
 
 
 function saveToStorage(){
   localStorage.setItem('cart', JSON.stringify(cart))
-}
+};
 
 export function addToCart(productId){
   const selectQuant = document.querySelector(`.js-select-quant-${productId}`)
@@ -35,7 +25,8 @@ export function addToCart(productId){
   } else {
     cart.push({
       productId,
-      quantity
+      quantity,
+      deliveryOptionId: deliveryOptions[0].id
     });
   };
 

basic-projects/amazon-project/data/delivery-options.js

@@ -0,0 +1,19 @@
+import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs/+esm';
+
+const deliveryOptions = [{
+  id: '1',
+  date: dayjs().add(7, 'days').format('dddd, MMMM D'),
+  priceCents: 0 
+},
+{
+  id: '2',
+  date: dayjs().add(3, 'days').format('dddd, MMMM D'),
+  priceCents: 499
+},
+{
+  id: '3',
+  date: dayjs().add(1, 'days').format('dddd, MMMM D'),
+  priceCents: 999
+}];
+
+export default deliveryOptions;

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

@@ -1,7 +1,9 @@
 import {cart, removeFromCart, calculateCartQuantity, updateQuantityLabel} from '../data/cart.js'
 import {products} from '../data/products.js'
 import formatCurrency from './utils/price.js';
-import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs/+esm'
+import deliveryOptions from '../data/delivery-options.js';
+import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs/+esm';
+
 
 
 let cartSummaryHTML = ''
@@ -11,19 +13,30 @@ cart.forEach((cartItem) => {
   const {productId} = cartItem;
 
   let matchingProduct;
-
   // get the full product just using id
   products.forEach((product) => {
     if (product.id === productId){
       matchingProduct = product;
     }
   });
 
+  const deliveryOptionId = cartItem.deliveryOptionId;
+
+  let deliveryOption;
+
+  deliveryOptions.forEach((option) => {
+    if (option.id === deliveryOptionId){
+      deliveryOption = option
+    }
+  });
+
+
+
 
   cartSummaryHTML += `
     <div class="cart-item-container js-cart-item-${matchingProduct.id}">
       <div class="delivery-date">
-        Delivery date: Wednesday, June 15
+        Delivery date: ${deliveryOption.date}
       </div>
 
       <div class="cart-item-details-grid">
@@ -54,57 +67,53 @@ cart.forEach((cartItem) => {
             </span>
           </div>
         </div>
-
         <div class="delivery-options">
           <div class="delivery-options-title">
             Choose a delivery option:
           </div>
+          ${deliveryOptionsHTML(matchingProduct, cartItem)}
+        </div>
+      </div>
+    </div>
+  `
+});
 
-          <div class="delivery-option">
-            <input type="radio" class="delivery-option-input"
-              name="delivery-option-${matchingProduct.id}">
-            <div>
-              <div class="delivery-option-date">
-                ${dayjs().add(7, 'days').format('dddd, MMMM D')}
-              </div>
-              <div class="delivery-option-price">
-                FREE Shipping
-              </div>
-            </div>
-          </div>
-          <div class="delivery-option">
-            <input type="radio" checked class="delivery-option-input"
-              name="delivery-option-${matchingProduct.id}">
-            <div>
-              <div class="delivery-option-date">
-                ${dayjs().add(3, 'days').format('dddd, MMMM D')}
-              </div>
-              <div class="delivery-option-price">
-                $4.99 - Shipping
-              </div>
-            </div>
-          </div>
-          <div class="delivery-option js-delivery-option">
-            <input type="radio" class="delivery-option-input"
+document.querySelector('.js-order-summary')
+  .innerHTML = cartSummaryHTML;
+
+
+function deliveryOptionsHTML(matchingProduct, cartItem){
+  let html = ''
+
+  deliveryOptions.forEach((deliveryOption) => {
+
+    const price = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)} -`;
+
+    const isChecked = deliveryOption.id === cartItem.deliveryOptionId
+
+    html += `
+      
+          <div class="delivery-option js-delivery-option"
+            data-product-id="${matchingProduct.id}"
+            data-delivery-option-id="${deliveryOption.id}">
+            <input type="radio"
+              ${isChecked ? 'checked' : ''}
+            class="delivery-option-input"
               name="delivery-option-${matchingProduct.id}">
             <div>
               <div class="delivery-option-date">
-                ${dayjs().add(1, 'days').format('dddd, MMMM D')}
+                ${deliveryOption.date}
               </div>
               <div class="delivery-option-price">
-                $9.99 - Shipping
+                ${price} Shipping
               </div>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-  `
-});
-
-document.querySelector('.js-order-summary')
-  .innerHTML = cartSummaryHTML;
+    `
 
+  })
+  return html;
+};
 
 
 document.querySelectorAll('.js-delete-button')
@@ -115,17 +124,17 @@ document.querySelectorAll('.js-delete-button')
 
       const container = document.querySelector(`.js-cart-item-${itemId}`)
         container.remove();
-        updateCartQunatity();
+        updateCartQuantity();
     })
   });
 
 
-function updateCartQunatity(){
+function updateCartQuantity(){
 
   const checkoutHeader = document.querySelector('.js-return-to-home-link')
   checkoutHeader.innerHTML = `${calculateCartQuantity()} items`;
 };
-updateCartQunatity();
+updateCartQuantity();
 
 
 document.querySelectorAll(`.js-update-button`)
@@ -158,7 +167,7 @@ function saveUpdatedQuantity(itemId){
   const newQuantity = Number(quantityInput.value);
 
   updateQuantityLabel(newQuantity, itemId);
-  updateCartQunatity();
+  updateCartQuantity();
 
   quantityInput.value = null;
 };
@@ -172,10 +181,4 @@ document.querySelectorAll('.js-save-link')
       saveUpdatedQuantity(itemId);
 
     })
-  });
-
-
-document.querySelectorAll('.delivery-option-input')
-  .forEach((input) => {
-    input
-  })
+  });