How to add user input to 2D array and update in session storage using Javascript

Viewed 30

I've created a drop-down shopping cart in my website and now I need to pass all the product data from this drop-down cart to an individual html shopping cart page with checkout function.

To achieve this, I've save the cart details into a 2D-array, stored it in session storage and display in another shopping cart page. However i'm stuck at storing the latest product quantity (input value) into the 2D-array for each of the product in the drop-down cart.

Since the quantityChanged(), updateCartTotal() and addItemToCart() are different functions handling different event as parameter. Therefore I can't just pass the quantity as a parameter to the addItemToCart() that stores the cart data into session storage. Below are my codes for the drop-down shopping cart function.

/*Cart Funtion*/

/*Store items to cart*/

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
}

else {
  ready();
}

function ready() {
  var removeCartItemButtons = document.getElementsByClassName('cart-remove-btn')
  for (var i = 0; i < removeCartItemButtons.length; i++) {
      var button = removeCartItemButtons[i]
      button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
      var input = quantityInputs[i]
      input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('addCart_button');
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i];
    button.addEventListener('click', addToCartClicked);
  }
}

function removeCartItem(event) {
  var buttonClicked = event.target
  buttonClicked.parentElement.parentElement.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var input = event.target
  if (isNaN(input.value) || input.value <= 0 || input.value % 1 != 0) {
      input.value = 1
  }
  updateCartTotal()
}

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var subtotal = 0
  var total = 0
  for (var i = 0; i < cartRows.length; i++) {
      var cartRow = cartRows[i]
      var priceElement = cartRow.getElementsByClassName('cart-price')[0]
      var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
      var price = parseFloat(priceElement.innerText.replace('RM', ''))
      var quantity = quantityElement.value
      subtotal = price * quantity
      total = total + (price * quantity)

      document.getElementsByClassName('cart-subtotal')[i].innerText = 'RM' + subtotal
  }
  
  total = Math.round(total * 100) / 100

  if (total % 1 != 0){
    document.getElementsByClassName('cart-total-price')[0].innerText = total 
  }

  else{
    document.getElementsByClassName('cart-total-price')[0].innerText = total+ '.00'
  }

  document.getElementsByClassName('label')[0].innerText = 'My Cart (' + cartRows.length +')'
}

var a=0;
var cartArray = [[]]

/*Add To Cart Funtion*/
function addToCartClicked(addCart) {
  var button = addCart.target;
  var shopItem = button.parentElement.parentElement;

  var imageSrc = shopItem.getElementsByClassName('item-img')[0].src;
  var title = shopItem.getElementsByClassName('item-title')[0].innerText;
  var price = shopItem.getElementsByClassName('item-price')[0].innerText;

  cartArray[a] = [imageSrc,title, price]
  a += 1
  console.log(cartArray)
  addItemToCart(imageSrc, title, price, cartArray);
  updateCartTotal();
}

var addItemId = 0;

function addItemToCart(imageSrc, title, price, cartArray) {
  //cart drop down
  var cartRow = document.createElement('div');
  cartRow.classList.add('cart-row')
  var cartItems = document.getElementsByClassName('cart-items')[0];
  var cartItemNames = cartItems.getElementsByClassName('cart-item-title');

  for (var i = 0; i < cartItemNames.length; i++){
    if (cartItemNames[i].innerText == title){
      alert('This package is already added to the cart.')
      return
    }
  }

  var cartRowContents = `
    <div class="cart-item cart-column">
    <span class="cart-item-title">${title}</span> 
    </div>
    <span class="cart-price cart-column">RM ${price}</span>
    <div class="cart-quantity cart-column">
      <input class="cart-quantity-input" type="number" value="1" min="1">
    </div>
    <span class="cart-subtotal cart-column">RM ${price}</span>
    <span class="cart-remove-btn cart-column"><i class="fa fa-trash" aria-hidden="true"></i></span>`

  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
  cartRow.getElementsByClassName('cart-remove-btn')[0].addEventListener('click',removeCartItem)
  cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChanged)
  

  //saving the values in session storage  
  sessionStorage.setItem("productArray", JSON.stringify(cartArray));
}

This is my drop-down shopping cart

Trying to update each product quantity here

0 Answers
Related