Подсчет суммы товаров в корзине JS?

Question

[Виктор Балановский]

Всем привет! Я новичок в JS. Есть корзина, как подсчитать через reduce сумму товаров в корзине и вывести в верстку?

const cart = () => {
  const buttonCart = document.getElementById("cart-button");
  const modalCart = document.querySelector(".modal-cart");
  const buttonClose = document.querySelector(".close");
  const body = modalCart.querySelector(".modal-body");
  const buttonSend = modalCart.querySelector(".button-primary");
  const buttonClear = modalCart.querySelector(".clear-cart");

  const resetCart = () => {
    body.innerHTML = "";
    localStorage.removeItem("cart");
    modalCart.classList.remove("is-open");
  };

  const incrementCount = (id) => {
    const cartArray = JSON.parse(localStorage.getItem("cart"));

    cartArray.map((item) => {
      if (item.id === id) {
        item.count++;
      }

      return item;
    });

    localStorage.setItem("cart", JSON.stringify(cartArray));
    renderItems(cartArray);
  };

  const decrementCount = (id) => {
    const cartArray = JSON.parse(localStorage.getItem("cart"));

    cartArray.map((item) => {
      if (item.id === id) {
        item.count = item.count > 0 ? item.count - 1 : 0;
      }

      return item;
    });

    localStorage.setItem("cart", JSON.stringify(cartArray));
    renderItems(cartArray);
  };

  const renderItems = (data) => {
    body.innerHTML = "";

    data.forEach(({ name, price, id, count }) => {
      const cartElem = document.createElement("div");

      cartElem.classList.add("food-row");

      cartElem.innerHTML = `<span class="food-name">${name}</span>
					<strong class="food-price">${price}</strong>
					<div class="food-counter">
						<button class="counter-button btn-dec" data-index=${id}>-</button>
						<span class="counter">${count}</span>
						<button class="counter-button btn-inc" data-index=${id}>+</button>
					</div>`;

      body.append(cartElem);
    });
  };

  body.addEventListener("click", (e) => {
    e.preventDefault();

    if (e.target.classList.contains("btn-inc")) {
      incrementCount(e.target.dataset.index);
    } else if (e.target.classList.contains("btn-dec")) {
      decrementCount(e.target.dataset.index);
    } else if (e.target.classList.contains("clear-cart")) {
      resetCart(e.target.dataset.index);
    }
  });

  buttonSend.addEventListener("click", () => {
    const cartArray = localStorage.getItem("cart");

    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: cartArray,
    })
      .then((response) => {
        if (response.ok) {
          resetCart();
        }
      })
      .catch((e) => {
        console.error(e);
      });
  });

  buttonClear.addEventListener("click", () => {
    resetCart();
  });

  buttonCart.addEventListener("click", () => {
    if (localStorage.getItem("cart")) {
      renderItems(JSON.parse(localStorage.getItem("cart")));
    }

    modalCart.classList.add("is-open");
  });

  buttonClose.addEventListener("click", () => {
    modalCart.classList.remove("is-open");
  });
};

export default cart;

Answer 1

[Noder SS]

К каждому товару добавьте какой то атрибут, например value, после чего создать переменную, с значением 0, когда пользователь будет нажимать на товар, возьмите значение атрибута value, и добавьте его к ранее созданой переменной и выведите её через .innerHTML , также добавьте сам товар в вкладку товаров. На каждый товар нужно ставить такие же самый функции по клику. Если что-то не понял, напиши. Помогу, чем смогу.

Comments

[Виктор Балановский]

Практически решил проблему, но как сделать, чтоб общая цена не рендерилась кучей спанов? В корзине на товарах есть кнопка (+) и (-) и при нажатии на них каждый раз рендериться общая цена, как быть?

const cart = () => {
  const buttonCart = document.getElementById("cart-button");
  const modalCart = document.querySelector(".modal-cart");
  const buttonClose = document.querySelector(".close");
  const body = modalCart.querySelector(".modal-body");
  const footer = modalCart.querySelector(".modal-footer");
  const buttonSend = modalCart.querySelector(".button-primary");
  const buttonClear = modalCart.querySelector(".clear-cart");

  const resetCart = () => {
    body.innerHTML = "";
    localStorage.removeItem("cart");
    modalCart.classList.remove("is-open");
  };

  const incrementCount = (id) => {
    const cartArray = JSON.parse(localStorage.getItem("cart"));

    cartArray.map((item) => {
      if (item.id === id) {
        item.count++;
      }

      return item;
    });

    localStorage.setItem("cart", JSON.stringify(cartArray));
    renderItems(cartArray);
  };

  const decrementCount = (id) => {
    const cartArray = JSON.parse(localStorage.getItem("cart"));

    cartArray.map((item) => {
      if (item.id === id) {
        item.count = item.count > 0 ? item.count - 1 : 0;
      }

      return item;
    });

    localStorage.setItem("cart", JSON.stringify(cartArray));
    renderItems(cartArray);
  };

  const renderItems = (data) => {
    body.innerHTML = "";

    data.forEach(({ name, price, id, count }) => {
      const cartElem = document.createElement("div");

      cartElem.classList.add("food-row");

      cartElem.innerHTML = `<span class="food-name">${name}</span>
					<strong class="food-price">${price}</strong>
					<div class="food-counter">
						<button class="counter-button btn-dec" data-index=${id}>-</button>
						<span class="counter">${count}</span>
						<button class="counter-button btn-inc" data-index=${id}>+</button>
					</div>`;

      body.append(cartElem);
    }, renderTotat());
  };

  const renderTotat = () => {
    const cartArray = JSON.parse(localStorage.getItem("cart"));
    const totalPriceArray = [];

    const arrayPush = (cartArray) => {
      totalPriceArray.length = 0;
      if (localStorage.getItem("cart")) {
        for (let i = 0; i < cartArray.length; i++) {
          totalPriceArray.push(cartArray[i].price * cartArray[i].count);
        }
      }
    };
    arrayPush(cartArray);

    const add = (accumulator, a) => {
      return accumulator + a;
    };
    const sum = totalPriceArray.reduce(add, 0);
    const totalPrice = document.createElement("div");

    totalPrice.classList.add("modal-footer");

    totalPrice.innerHTML = `<span class="modal-pricetag">${sum} ₽</span>`;

    footer.prepend(totalPrice);
  };

  body.addEventListener("click", (e) => {
    e.preventDefault();

    if (e.target.classList.contains("btn-inc")) {
      incrementCount(e.target.dataset.index);
    } else if (e.target.classList.contains("btn-dec")) {
      decrementCount(e.target.dataset.index);
    } else if (e.target.classList.contains("clear-cart")) {
      resetCart(e.target.dataset.index);
    }
  });

  buttonSend.addEventListener("click", () => {
    const cartArray = localStorage.getItem("cart");

    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: cartArray,
    })
      .then((response) => {
        if (response.ok) {
          resetCart();
        }
      })
      .catch((e) => {
        console.error(e);
      });
  });

  buttonClear.addEventListener("click", () => {
    resetCart();
  });

  buttonCart.addEventListener("click", () => {
    if (localStorage.getItem("cart")) {
      renderItems(JSON.parse(localStorage.getItem("cart")));
    }

    modalCart.classList.add("is-open");
  });

  buttonClose.addEventListener("click", () => {
    modalCart.classList.remove("is-open");
  });
};

export default cart;

[Виктор Балановский]

Если поможет, есть ссылка на гит с полным кодом

[Noder SS]

Есть вариант, при минусе на товар отнимай от общего числа в innerHTML значение товара, для этого на минус пропишы клик, и создай в нем переменную, кстати, для полной цены создай отдельную переменную. В созданную переменную добавь цену именно этого товара, и отними её от всего. Если все равно не получается, кидай код в любое время( для тебя наверное лучше лично) могу просмотреть и добавить, ты только добавь комментарии, чтобы я понял уже сделай корзину, клик по минусу могу добавить сам, надеюсь помогу. Удачи, жду ответа

[Noder SS]

Виктор Балановский, а хотя давай код, помогу

[Noder SS]

Виктор Балановский, а, вижу. Ты скинул