Question 35691 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I define if a product is in a basket? – Jquery

Tell me please, how can I do it for web-site on HTML CSS Javascript. If product is not in a shopping cart,
then show a text "Your cart is Empty." If the product is in the shopping cart, hide the text "Your cart is Empty.".
In Html there are several buttons with class .buttons on which the user clicks and adds products to the cart.
There are also added products in the shopping cart with class .basket__item. Buttons to delete items in cart with class .delete.
Lastly, the text with class .text_Empty_cart.
I was trying to do it through arrays and nothing happened. I tried through NodeList collections, but vainly.

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();

Above one of my efforts. I’ll be glad for any help!

Tags:

2

Answers


  1. 0

    First of all, maybe you should use j++.

          for (var j = 0; j < cart_Items_array.length; i++) {

    Second, it looks the script will reset the visibility. Maybe you should:

          boolean hasItem = false;
      for (var j = 0; j < cart_Items_array.length; j++) {
        if (cart_Items_array[j] > 0) {
            hasItem = true;
            break;
        }
      }
      if(hasItem)
          text_Empty_cart.style.display = "none";
      else 
          text_Empty_cart.style.display = "block";
    Login or Signup to reply.
  2. 0

    You have not shared your HTML, so, for the moment we can only guess.

    Below I out together a working snippet that will make the .empty__basket div disappear as soon as there are elements in the cart:

    var i=0;
document.body.addEventListener("click",ev=>{
 const el=ev.target;
 if (!el.classList.contains("buttons")) return;
 
 const btxt=el.textContent;
 if(btxt=="add item"){
  cart.insertAdjacentHTML("beforeend",
  `<div class="basket__item">this is item ${++i} ... <button class="buttons">delete</button>`);
 }
 else if (btxt=="delete"){
  el.closest("div").remove();
 }
 Cart_check();
});
const text_Empty_cart = document.querySelector(".text_Empty_cart"),
 cart=document.querySelector("#cart");

function Cart_check() {
  text_Empty_cart.style.display=document.querySelector(".basket__item")?"none":"";
}
Cart_check();
    <button class="buttons">add item</button>
<div id="cart"></div>
<div class="text_Empty_cart">Your cart is currently empty.</div>

    The Cart_check() function now becomes almost trivial: It simply checks for an existence of a .basket__item element and sets the visibility of the .text_Empty_cart element accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search