Как добавить сохраненные товары в корзину? - PullRequest
Новая
       37

Как добавить сохраненные товары в корзину?

0 голосов
/ 30 октября 2018

Корзина не сохраняется. Я хочу сохранить элементы в localStorage. Проблема в том, что я не могу добавить товары в корзину, все сохраняется в локальном хранилище, когда я смотрю консольный журнал , но я не знаю, как добавить эти товары в корзину. .

// 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);
...