Lesson 14

[Schemper]

Please does anyone have a comprehensive solution to the problem in lesson 14, I noticed that the cart disappears when I added local storage.

Here is the problem I am encountering: Uncaught TypeError: Cannot read properties of undefined (reading 'id') at checkout.js:20:48 at Array.forEach () at checkout.js:7:6Understand this error

Here is my code for checkout.js: import {cart, removeFromCart} from '../data/cart.js'; import {products} from '../data/products.js'; import {formatCurrency} from './utils/money.js';

let cartSummaryHTML = '';

cart.forEach((cartItem) => { const productId = cartItem.productId;

let matchingProduct;

products.forEach((product) => { if (product.id === productId) { matchingProduct = product; } });

cartSummaryHTML += `

Delivery date: Tuesday, June 21

  <div class="cart-item-details-grid">
    <img class="product-image"
      src="${matchingProduct.image}">

    <div class="cart-item-details">
      <div class="product-name">
        ${matchingProduct.name}
      </div>
      <div class="product-price">
        $${formatCurrency(matchingProduct.priceCents)}
      </div>
      <div class="product-quantity">
        <span>
          Quantity: <span class="quantity-label">${cartItem.quantity}</span>
        </span>
        <span class="update-quantity-link link-primary">
          Update
        </span>
        <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
          Delete
        </span>
      </div>
    </div>

    <div class="delivery-options">
      <div class="delivery-options-title">
        Choose a delivery option:
      </div>
      <div class="delivery-option">
        <input type="radio" checked
          class="delivery-option-input"
          name="delivery-option-${matchingProduct.id}">
        <div>
          <div class="delivery-option-date">
            Tuesday, June 21
          </div>
          <div class="delivery-option-price">
            FREE Shipping
          </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">
            Wednesday, June 15
          </div>
          <div class="delivery-option-price">
            $4.99 - Shipping
          </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">
            Monday, June 13
          </div>
          <div class="delivery-option-price">
            $9.99 - Shipping
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

`; });

document.querySelector('.js-order-summary') .innerHTML = cartSummaryHTML;

document.querySelectorAll('.js-delete-link') .forEach((link) => { link.addEventListener('click', () => { const productId = link.dataset.productId; removeFromCart(productId);

  const container = document.querySelector(
    `.js-cart-item-container-${productId}`
  );
  container.remove();
});

});

Code for cart.js: export let cart = JSON.parse(localStorage.getItem('cart'));

if (!cart) { cart = [{ productId: 'e43638ce-6aa0-4b85-b27f-e1d07eb678c6', quantity: 2, }, { productId: '15b6fc6f-327a-4ec4-896f-486349e85a3d', quantity: 1 }]; }

function saveToStorage() { localStorage.setItem('cart', JSON.stringify(cart)); }

export function addToCart(productId) { let matchingItem;

cart.forEach((cartItem) => { if (productId === cartItem.productId) { matchingItem = cartItem; } });

if (matchingItem) { matchingItem.quantity += 1; } else { cart.push({ productId: productId, quantity: 1 }); }

saveToStorage(); }

export function removeFromCart(productId) { const newCart = [];

cart.forEach((cartItem) => { if (cartItem.productId !== productId) { newCart.push(cartItem); } });

cart = newCart;

saveToStorage(); }

[Schemper]

For anyone experiencing the same issue described above, I found a fix for this error. It appears that I had other data saved in my local storage from previous practice, and the forEach code was looping over this data. This was throwing an error because the data did not have a productId.

To resolve this, I cleared my local storage using the method:

  `localStorage.clear()`

I inserted this piece of code at the top of my checkout.js file and saved it once. The code began working, so I removed the clear method and saved it one more time. I hope this helps.