Question

Setting up a simple shopping cart with Javascript

Posted May 7, 2021 134 views
APIJavaScripte-commerceHTML

Hi everyone, I am new to programming especially Javascript and am getting very frustrated with my Real Estate Project. I am trying to add a simple shopping cart and keep getting errors with the functionality part. Here is my HTML File:

<section class="container content-section">
       <h2 class="section-header">View Properties</h2>
       <div id="propertyContainer" class="propertyItems1"></div>
   </section>

  <section class="container content-section">
    <h2 class="section-header">CART</h2>
    <div class="cart-row">
      <span class="cart-item cart-header cart-column">Listing</span>
      <span class="cart-avgPrice cart-header cart-column">PRICE</span>
      <span class="cart-propType cart-header cart-column">Property Type</span>
      <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
      </div>
    <div class="cart-total">
      <strong class="cart-total-title">Total</strong>
      <span class="cart-total-price">$0</span>
    </div>
      <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
 </section>

Here is my JS File:

let propertyItems1= document.getElementsByClassName(`#propertyItems1`);
let allItems  = propertyContainer.getElementsByClassName(`fullAddress propType avgPrice`);
let data1 = [].map.call(allItems, fullAddress => fullAddress.textContent);
let data2 = [].map.call(allItems, propType => propType.textContent);
let data3 = [].map.call(allItems, avgPrice => fullAddress.textContent);

//Shopping Cart Functionality
if (document.readyState == 'loading') {
  document.addEventListner('DOMContentLoaded', ready)
} else {
   ready()
}
function ready() {
    console.log("running the ready() function")
let removeItemButtons = document.getElementsByClassName('btn-danger')
for (let i = 0; i < removeItemButtons.length; i++) {
  let button = removeItemButtons[i]
  button.addEventListener('click', removeCartItem)
  }
  let quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (let i = 0; i < quantityInputs.length; i++) {
    let input = quantityInputs[i]
    input.addEventListner('change', quantityChanged)
  }
  let addToCartButtons = document.getElementsByClassName('property-item-button')
  for (let i = 0; i < addToCartButtons.length; i++) {
    let button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }

document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
  alert('Thank You for purchasing a home')
  let cartItems = document.getElementsByClassName('cart-items')[0]
  while(cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild)
  }
  updateCartTotal()
}

function removeCartItem(event) {
  let buttonClicked = event.target
  buttonClicked.parentElement.remove
  updateCartTotal()
}
function quantityChanged(event) {
  let input = event.target
  if(isNaN(input.value) || input.value <= 0) {
  input.value = 1
  }
  updateCartTotal()
}

function addToCartClicked(event) {
  let button = event.target
  let propertyItems1 = button.parentElement
  let fullAddress = propertyItems1.querySelector('.fullAddress').innerText
    let propType = propertyItems1.getElementsByClassName('propType').innerText
  let avgPrice = propertyItems1.getElementsByClassName('avgPrice').innerText
  addItemToCart(fullAddress,propType,avgPrice)
  updateCartTotal()

}

function addItemToCart(fullAddress, propType, avgPrice) {
    let cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    let cartItems = document.getElementsByClassName('cart-items')[0]
    let cartItemNames = cartItems.getElementsByClassName('cart-item-fullAddress')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == fullAddress) {
            alert('This item is already added to the cart')
            return
        }
    }

    let cartRowContents = `
        <div class="cart-item cart-column">
            <span class="fullAddress">${fullAddress}</span>
                        <span class="propType">${propType}</span>
        </div>
        <span class="cart-avgPrice cart-column">${avgPrice}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    let cartItemContainer = document.getElementsByClassName('cart-items')[0]
    let cartRows = cartItemContainer.getElementsByClassName('cart-row')
    let total = 0
    for (let i = 0; i < cartRows.length; i++) {
        let cartRow = cartRows[i]
        let avgPriceElement = cartRow.getElementsByClassName('cart-avgPrice')[0]
        let quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        let avgPrice = parseFloat(avgPriceElement.innerText.replace('$', ''))
        let quantity = quantityElement.value
        total = total + (avgPrice * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-avgPrice')[0].innerText = '$' + total
}

The current error I am getting is “Cannot set property of undefined at updateCartTotal.” Any assistance would be appreciated.

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!