Question

购物车未保存。我要做的是将项目保存在localStorage中。问题是我无法将商品添加到购物车中，当我查看console log时，所有内容都保存在本地存储中，但是我不知道如何将这些商品添加到购物车中。

// HTML代码//

<div class="cart-layout">
    <div class="added-product">
        <div class="each-cart-row">
            <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
            <h4 class="title">T-shirt</h4>
            <span class="price">$19.99</span>
            <h3 id="qua">1</h3>
            <button class="removebtn">remove</button>
        </div>
        <div class="each-cart-row">
            <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
            <h4 class="title">shirt</h4>
            <span class="price">$14.99</span>
            <h3>1</h3>
            <button class="removebtn">remove</button>
        </div>

    </div>
    <div class="total-layout">
        <h2>Total</h2>
        <span>$0</span>
    </div>
    <div class="added-cart-btn">
        <button id="removeall">Remove all</button>
        <button>Proceed</button>
    </div>
</div>

//当单击添加到购物车按钮时，将执行此事件。 //

function addtocartbtnclicked(event) {
  var button = event.target;
  var shopitem = button.parentElement.parentElement;
  var title = shopitem.querySelectorAll('h1')[0].textContent;
  var price = shopitem.querySelectorAll('.card .price')[0].textContent;
  var imgsrc = shopitem.querySelectorAll('.card .my-img')[0].src; 

  additemtocard(title, price, imgsrc);
  updatetotal();
  quantityupdate();
  savecart();
  loadcart();
}

//此事件将在购物车中添加物品。 //

function additemtocard(title, price, imgsrc) {
  var div = document.createElement('div');
  div.classList.add('each-cart-row');
  var mainElement = document.querySelectorAll('.cart-layout')[0];
  var carttitle = mainElement.querySelectorAll('.title');
  for (var i = 0; i < carttitle.length; i++) {
    if(carttitle[i].innerText == title){
      alert('this item is on the cart');
      return;
    };

  }
  var tag = '<img class="image" src="'+(imgsrc)+'"><h4 class="title">'+(title)+'</h4><span class="price">'+(price)+'</span><h3>1</h3><button class="removebtn">remove</button>';

  div.innerHTML = tag;
  var cartlayout = document.querySelector('.added-product');
  cartlayout.appendChild(div); 
  div.querySelectorAll('.removebtn')[0].addEventListener('click', removebtncart);      
}

//保存项目。 //

function savecart(){
  var qty = document.querySelector('.totalqty').textContent;
  localStorage.setItem('qty', qty);
  var tprice = document.querySelector('.total-layout span').textContent;
  localStorage.setItem('tprice', tprice);

  //This below function is to get all the list
  var listitem = document.querySelectorAll('.each-cart-row');
  let m = [...listitem].map(function(item) {
    return {
      img: item.querySelector('img').getAttribute('src'),
      text: item.querySelector('.title').textContent.trim(),
      price: item.querySelector('.price').textContent.trim(), 
      qnty: item.querySelector('h3').textContent.trim() 
    }
  })
  localStorage.setItem('layoutlist', JSON.stringify(m));
}

function loadcart() {
  var qty = localStorage.getItem('qty');
  document.querySelector('.totalqty').textContent = qty;
  var tprice = localStorage.getItem('tprice');
  document.querySelector('.total-layout span').textContent = tprice;
  var m = JSON.parse(localStorage.getItem('layoutlist'));

  // I guess here is my problem where I can't figure out how to add saved items in the cart
  m =  document.querySelectorAll('.each-cart-row');
}

loadcart();
console.log(localStorage);

如何在购物车中添加保存的物品？

0 个答案: