Как реализовать кнопки удаления товара, добавления и уменьшения количества товара в корзине?

Question

[petrro]

Делаю сайт на котором можно добавить товары в мини-корзину (она на той же html странице что и товары) а также эти товары можно фильтровать различными фильтрами.

Вот мой сайт в песочнице, можете посмотреть что да как работает:
https://codesandbox.io/s/great-bardeen-p7v7f

Но есть задача создать отдельную html страницу корзины (cart.html)
1) в котрой будут отображатся товары добавленные в мини-корзину
2) кнопки удаление товара, добавления и уменшения количества товара в корзине, и цена умножается на количество добавленных товаров

это все должно выглядеть вот так на странице cart.html:


а вот что у меня получается:

а кнопки вообще не реагируют на добавление товара

Вот файл (сart.js):

$(document).ready(function() {
  var cart = {};
  checkCart();
  var DATA = (function() {
    var json = null;
    $.ajax({
      async: false,
      global: false,
      url: "ajax/goods.json",
      dataType: "json",
      success: function(data) {
        json = data.filter(function(item) {
          return item.sex === sex;
        });
      }
    });
    return json;
  })();

  outputGoods(DATA);
  function outputGoods(goods) {
    document.getElementById("goods").innerHTML = goods
      .map(
        n => `
      <button class="delete" data-art="${n}" >x</button>
        <img src="${n.image}" width="48">
        ${n.name}
        <button class="minus" data-art="${n}">-</button>
        ${n}
        <button class="plus" data-art="${n}">+</button>
        ${n}*${n.cost}
    `
      )
      .join("");
    document.querySelectorAll("button.add-to-cart").forEach(function(but) {
      but.addEventListener("click", addToCart);
    });
  }
           document.querySelectorAll('.plus').forEach(function(but) {   // по клику запусить функцию что добавляет товар
            but.addEventListener("click",plusGoods);
})  
            document.querySelectorAll('.minus').forEach(function(but) { // по клику запусить функцию что уменьшает на один товар
           but.addEventListener("click",minusGoods); 
})    
            document.querySelectorAll('.delete').forEach(function(but) { // по клику запусить функцию что удаляет товары
           but.addEventListener("click",deleteGoods);
}) 

  function checkCart() {
    if (localStorage.getItem("cart") != null) {
      cart = JSON.parse(localStorage.getItem("cart"));
      showMiniCart();
    }
  }

  function showMiniCart() {                                          // отобразить корзину на странице
    var out = "";
    for (var w in cart) {
      out += w + " --- " + cart[w] + "<br>";
    }
   
    document.getElementById("my-cart").innerHTML = out;
  }
    
function plusGoods() {                                         // увеличить на один товар
         var articul = this.getAttribute('data-art');       
        cart[articul]++;
        saveCartToLS(); 
        showCart();
    }

function minusGoods() {                                   // уменшить на один товар
         var articul = this.getAttribute('data-art');      
        if (cart[articul] > 1) {
            cart[articul]--;
        }
        else {
            delete cart[articul];
        }
        saveCartToLS();
        showCart();
    }

  function deleteGoods() {                                  // удалить товары
          var articul = this.getAttribute('data-art');      
        delete cart[articul];
        saveCartToLS();
        showCart();
    }
});

P.S. cart.html в печочнице (где весь проект)

Помогите пожалуйста исправить код чтобы работало...

Comments

[Антон Р.]

Разбивай код на более мелкие фрагменты, определяй где именно проблема, исправляй, собирай обратно.

Answer 1

[Алексей]

Давайте итерационно:
1. функция map может иметь 3 аргумента. Вы используете только один. Т.о. в переменной n лежит объект со структурой как в goods.json. [object Object] это как раз попытка вывести значение data-art="${n}"
2. Полагаю data-art должен выглядеть так, что бы в дальнейшем получить количество:

<button class="minus" data-art="${n.name}">-</button>

3. Понадобиться еще функция:

function getQty(articul) {
// Вернет количество
    return cart[articul];
  }

4. В результате outputGoods преобразиться в следующее:

function outputGoods(goods) {
    document.getElementById("goods").innerHTML = goods
      .map(
        n => `
      <button class="delete" data-art="${n.name}" >x</button>
        <img src="${n.image}" width="48">
        ${n.name}
        <button class="minus" data-art="${n.name}">-</button>
  ${getQty(n.name)}
        <button class="plus" data-art="${n.name}">+</button>
        ${getQty(n.name)}*${n.cost}
    `
      )
      .join("");
    document.querySelectorAll("button.add-to-cart").forEach(function(but) {
      but.addEventListener("click", addToCart);
    });
  }

С этим можно работать дальше. :)