Как я могу определить находится ли товар в корзине? javascript или jquery

Question

Подскажите пожалуйста, как это реализовать для сайта на HTML CSS Javascript. Если товара нет в корзине, то показать текст "Корзина пуста". Если товар есть в корзине, то скрыть текст "Корзина пуста". В Html есть несколько кнопок с классом .buttons на которые пользователь нажимает и добавляет товары в корзину. Также есть добавленные товары в корзине с классом .basket__item. Кнопки удаления товаров с классом .delete. Сам текст с классом .text_Empty_cart.

Пытался сделать через массивы и ничего не вышло. Пробовал через коллекции NodeList, но безуспешно.

function Cart_check() {
  const btns_array = [...document.querySelectorAll(".buttons")];
  const cart_Items_array = [...document.querySelectorAll(".basket__item")];
  var text_Empty_cart = document.querySelector(".text_Empty_cart");
  for (var i = 0; i < btns_array.length; i++) {
    btns_array.addEventListener("click", () => {
      for (var j = 0; j < cart_Items_array.length; i++) {
        if (cart_Items_array[j] > 0) {
          text_Empty_cart.style.display = "none";
        } else {
          text_Empty_cart.style.display = "block";
        }
      }
    });
  }
}
Cart_check();

Выше одна из моих попыток. Буду рад любой помощи.

Answer 1

Я бы реализовал через класс. Следующим образом.

 class Chart {
   CHART_COUNT = 0

   addNewItem(){
     this.CHART_COUNT++
   }

   deleteItem(){
     this.CHART_COUNT <= 0 ? 0 : this.CHART_COUNT --
   }

   getCount(){
     return this.CHART_COUNT
   }
 }

Это и просто и удобно. Класс можно вынести в отельный файл и чтобы он всегда оставался "достоверным" можно сделать так:

  const chart = new Chart()
  export default chart

Таким образом класс будет инициализирован и вы получите возможность использовать его и получать достоверные данные.

(P.s) можно также добивать в него, например, запрос на сервер, в котором будет проверяться сколько элементов в корзине.

Желаю удачи!

БЛОГ НА HUSL

Как я могу определить находится ли товар в корзине? javascript или jquery

Ответы (1 шт):