@IlyaMalyukov

Как удалить товар из корзины?

Есть массив products, в котором хранятся все товары

let products = [
    {id: 0, name: 'Футболка 1', img: "https://clck.ru/Smwci", category: 'Футболки', price: 2500},
    {id: 1, name: 'Футболка 2', img: "https://clck.ru/Smwee", category: 'Футболки', price: 2500},
    {id: 2, name: 'Футболка 3', img: "https://clck.ru/Smwg4", category: 'Футболки', price: 2500},
    {id: 3, name: 'Футболка 4', img: "https://clck.ru/Smwhs", category: 'Футболки', price: 2500},
    {id: 4, name: 'Комплект 1', img: "https://clck.ru/Smwit", category: 'Комплекты', price: 3500},
    {id: 5, name: 'Комплект 2', img: "https://clck.ru/Smwjd", category: 'Комплекты', price: 3500}
]


Из него добавляются объекты в массив cart
Но когда я удаляю какой-то товар, удаляется не тот, на который я нажимаю
Или сразу несколько

Вот сам скрипт
let catalog = document.querySelector('#catalog');
let btnView = document.querySelector('#btnView');
let modal = document.querySelector('#modal');
let cartLink = document.querySelector('#cartLink');
let modalClose = document.querySelector('#modalClose');

let cart = [];
let toCart = document.querySelector('#toCart');
let btnToCart = document.querySelector('.btnToCart');
let cartProducts = document.querySelector('#cartProducts');
let deleteProducts = document.querySelector('#deleteProducts');

// Каталог. Отображение товаров

products.forEach((i) => {

  catalog.innerHTML += `
    <div class="card">
        <h3>${i.name}</h3>
        <img src="${i.img}">
        <p>₽ ${i.price}</p>
        <button id="${i.id}" class="btnToCart" onclick = "addToCart(id)">Добавить в корзину</button>
    </div>
    `;

  });


// Модальное окно корзины

function renderCart() {
  if(cart.length === 0) {
    cartProducts.innerHTML = `
      <li> Ничего не добавлено <li/>
    `;
    deleteProducts.disabled = true;
  } else {
    cartProducts.innerHTML = '';
    cart.forEach((i) => {
      cartProducts.innerHTML += `
        <li class="modal__window_product">   
          <img class="modal__window_img" src="${i.img}">
          <div class="modal__window_description">
            <span><b>${i.name}</b></span>
            <span>${i.price} ₽</span>
          </div>
          <button id="${i.id}" class="modal__window_btn"
          onclick = "removeFromCart(id)">
          ✖</button>
        </li>
      `;
    });
      deleteProducts.disabled = false;
  };
};

  cartLink.addEventListener('click', () => {
      modal.style.display = 'flex';
  });

  modalClose.addEventListener('click', () => {
    modal.style.display = 'none';
  });


// Добавление товаров в корзину 

  function addToCart(id) {
    cart.push(products[id]);
    console.log(cart);
    renderCart();
  };

// Удаление товара из корзины

  function removeFromCart(id) {
    cart.splice(cart[id], 1);
    renderCart();
    console.log(cart);
  };

// Очистить корзину

deleteProducts.addEventListener('click', ()=> {
  cart = [];
  renderCart();
});


И html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <header>
            <nav class="menu">
                <div class="menu__categories">
                    <button class="allCategories" id="btnAllProducts">Все товары</button>
                   <button class="tshorts" id="btnTshort">Футболки</button>
                   <button class="complects" id="btnComplect">Комплекты</button>
                </div>
                <button class="cartLink" id="cartLink">Корзина</button>
            </nav>
        </header>
        
        <main>
            <div id="catalog" class="catalog"></div>
        </main>
        
    </div>

    <div class="modal" id="modal">
        <div class="modal__window">
            <p class="modal__window_close" id="modalClose">✕</p>
            <div class="modal__window_container">
                <h2 class="modal__window_title">Корзина</h2>
                    <ul id="cartProducts" class="modal__window_cart">
                        
                    </ul>
                <button disabled=true id="deleteProducts">Очистить корзину</button>
            </div>
        </div>
    </div>

    <script src="products.js"></script>
    <script src="script.js"></script>
</body>
</html>
  • Вопрос задан
  • 2658 просмотров
Решения вопроса 1
Ошибка в двух функциях. Изучайте свой код.

function addToCart(id) {
    let product = products.find(it => it.id === parseInt(id));
    
    cart.push(product);
    console.log(cart);
    renderCart();
  };

// Удаление товара из корзины

  function removeFromCart(id) {
    let item = cart.find(it => it.id === parseInt(id));
    let index = cart.indexOf(item);
    cart.splice(index, 1);
    renderCart();
    console.log(cart);
  };
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
sinneren
@sinneren
Всё просто.
cart.push(products[id]); - вы добавляете товар не по id, а по индексу.

То есть products[5] в вашем случае равно id = 5 лишь случайно. заполните массив иначе и всё, уже не равен. И тем более, когда в cart не соответствует индексам вы не можете так же удалить cart.splice(cart[id], 1);
В функцию передаёте id, а удаляете по индексу.
При добавлении и удалении сначала нужно найти в массиве через findIndex(id == id_полученный_в_функции)) и уж делайте splice(результат findIndex)

короче, поменять:
cart.push(products.find((item) => { return item.id==id}));
и
cart.splice(cart.findIndex((item) =>{ return item.id == id }), 1);
Ответ написан
Комментировать
@IlyaMalyukov Автор вопроса
Есть ещё такой вариант решения:

// Удаление товара из корзины

  function removeFromCart(id) {
    let index = cart.indexOf(products[id]);
    cart.splice(index, 1);
    renderCart();
    console.log(cart);
  };
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы