Sunday

What is the error in the input card codes

2:08 AM html, javascript, jquery No comments

Issue

What is the error in the input card codes, the + - buttons work fine, but the value of the input is not added to the basket with the product, only one product is added ..........................................................................................................................................................................................................

  var shoppingCart = (function() {
   
   // =============================
   // Private methods and propeties
   // =============================
   cart = [];
   // Constructor
   function Item( name, price, count, image) {
     this.name = name;
     this.price = price;
     this.count= count;
     this.image = image
   }
   
   // Save cart
   function saveCart() {
     localStorage.setItem('shoppingCart', JSON.stringify(cart));
   }
   
     // Load cart
   function loadCart() {
     cart = JSON.parse(localStorage.getItem('shoppingCart'));
   }
   if (localStorage.getItem("shoppingCart") != null) {
     loadCart();
   }
   
  
   // =============================
   // Public methods and propeties
   // =============================
   var obj = {};
   
   // Add to cart
   obj.addItemToCart = function(name, price, count, image) {
     for(var item in cart) {
       if(cart[item].name === name) {
         cart[item].count ++;
         saveCart();
         return;
       }
     }
     var item = new Item(name, price, count, image);
     cart.push(item);
     saveCart();
   }
   // Set count from item
   obj.setCountForItem = function(name, count) {
     for(var i in cart) {
       if (cart[i].name === name) {
         cart[i].count = count;
         break;
       }
     }
   };
   // Remove item from cart
   obj.removeItemFromCart = function(name) {
       for(var item in cart) {
         if(cart[item].name === name) {
           cart[item].count --;
           if(cart[item].count === 0) {
             cart.splice(item, 1);
           }
           break;
         }
     }
     saveCart();
   }
  
   // Remove all items from cart
   obj.removeItemFromCartAll = function(name) {
     for(var item in cart) {
       if(cart[item].name === name) {
         cart.splice(item, 1);
         break;
       }
     }
     saveCart();
   }
  
   // Clear cart
   obj.clearCart = function() {
     cart = [];
     saveCart();
   }
  
   // Count cart 
   obj.totalCount = function() {
     var totalCount = 0;
     for(var item in cart) {
       totalCount += cart[item].count;
     }
     return totalCount;
   }
  
   // Total cart
   obj.totalCart = function() {
     var totalCart = 0;
     for(var item in cart) {
       totalCart += cart[item].price * cart[item].count;
     }
     return Number(totalCart.toFixed(2));
   }
  
   // List cart
   obj.listCart = function() {
     var cartCopy = [];
     for(i in cart) {
       item = cart[i];
       itemCopy = {};
       for(p in item) {
         itemCopy[p] = item[p];
  
       }
       itemCopy.total = Number(item.price * item.count).toFixed(2);
       cartCopy.push(itemCopy)
     }
     return cartCopy;
   }
  
   // cart : Array
   // Item : Object/Class
   // addItemToCart : Function
   // removeItemFromCart : Function
   // removeItemFromCartAll : Function
   // clearCart : Function
   // countCart : Function
   // totalCart : Function
   // listCart : Function
   // saveCart : Function
   // loadCart : Function
   return obj;
  })();
  
  
  // *****************************************
  // Triggers / Events
  // ***************************************** 
  // Add item
  $('.additem').click(function(event) {
   event.preventDefault();
   var name = $(this).data('name');
   var price = parseInt($(this).data('price'));
   var image  = $(this).parents("div.card").find(".card-img-top").attr('src')
   shoppingCart.addItemToCart(name, price, 1 ,image);
   displayCart();
  });
  
  // Clear items
  $('.clear-cart-items').click(function() {
   shoppingCart.clearCart();
   displayCart();
  });
  
  
  function displayCart() {
  
   var cartArray = shoppingCart.listCart();
   var output = "";
   for(var i in cartArray) {
        output += "<tr class='cartTable'>"
       +  "<td><img src='" + cartArray[i].image + "' style='width:150px;'></td>" 
       + "<td class='TableTitle'>" + cartArray[i].name + "</td>"
       + "<td>" + cartArray[i].price + "</td>"
       + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
       + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
       + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
       + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
       + " = " 
       + "<td>" + cartArray[i].total + "</td>" 
       +  "</tr>"; 
       
   }
   $('.show-cart').html(output);
   $('.total-cart').html(shoppingCart.totalCart());
   $('.total-count').html(shoppingCart.totalCount());
  }
  
  
  // Delete item button
  
  $('.show-cart').on("click", ".delete-item", function(event) {
   var name = $(this).data('name')
   shoppingCart.removeItemFromCartAll(name);
   displayCart();
  })
   
   //These are the codes of the internal input, the input of the cart
   //This input works well and the buttons are as well. When you 
  click 
   on each button, the value is provided
  // -1
  $('.show-cart').on("click", ".minus-item", function (event) {
   var name = $(this).data('name')
   shoppingCart.removeItemFromCart(name);
   displayCart();
  })
  
  
  // +1
  $('.show-cart').on("click", ".plus-item", function(event) {
   var name = $(this).data('name')
   shoppingCart.addItemToCart(name);
   displayCart();
  })
  
  
  // Item count input
  $('.show-cart').on("change", ".item-count", function(event) {
    var name = $(this).data('name');
    var count = Number($(this).val());
   shoppingCart.setCountForItem(name, count);
   displayCart();
  });
  
  
  displayCart();
  
  
//These are the codes of the external input, the input of the card
//here the buttons + - work fine but the input value is not added to the cart, only one product is added, even if the input value is 10
  
  function increaseCount(a, b) {
    var input = b.nextElementSibling;
    var value = parseInt(input.value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    input.value = value;
    displayCart();
  }
  
  function decreaseCount(a, b) {
    var input = b.previousElementSibling;
    var value = parseInt(input.value, 10);
    if (value > 1) {
      value = isNaN(value) ? 0 : value;
      value--;
      input.value = value;
    }
  }

<div class="ourproducts">


  <div class="card" >
      <img class="card-img-top"  src="images/img/1.png" alt="Product Name" data-hook="product-image">
     <div class="setproprice">
       <div class="proprice">
          <span class="spanpropreice1">Offer</span><span class="card-text">1.50</span>
       </div>
     </div>
      <div class="protext">
          <span>Germany</span>
          <h2 class="card-title"  >Product 1</h2>
           <span>weight</span>
           <span>tax</span>
      </div>
      <fieldset class="card-block"  data-hook="product-item-quantity-counter" 
      aria-label="select quantity" dir="rtl" data-error="false">

     <div>
       <button  class="plus-item" data-name=`cartArray[i].name`  onClick='increaseCount(event, this)' ><span  data-name="cartArray[i].name" class="material-icons plus-item">
           add
           </span></button>

           <input type="number"  class="item-count"  value="1"   data-name="cartArray[i].name"  min="1" max="20" step="1" >

           <button class="minus-item"  data-name="cartArray[i].name" onClick='decreaseCount(event, this)'  value="1" ><span data-name="cartArray[i].name" class="material-icons minus-item">
               remove
               </span></button>
     </div>
      </fieldset>
      <button class="additem"  data-name="Product"  data-price="2.00+'€'" onclick="addNew()"> 
       <label class="addItemLabel">Add Item</label> <span class="material-icons AddItemCartImage">
          shopping_cart</span>
          <span class="material-icons fff">shopping_cart</span>
          <i class="fa fa-shopping-bag bbb" aria-hidden="true"  style="font-size: 15px;"></i>      
        </button>
  </div>
</div>

Solution

ok so I fixed the issue, I also changed all vars to let or const to ensure data values don't get manipulated. You just needed to pass the count though to the add basket method

    let count = parseInt($(this).parents("div.card").find(".item-count").val());
    shoppingCart.addItemToCart(name, price, count, image);

then in the basket method needed to either use the passed-in value or add 1 to the count for the + icon when the item is in the basket

cart[item].count += count ||  1

I fixed a few other minor things too

see: https://jsfiddle.net/PatrickHume/h7wabuLr/ (the below won't run because SO doesn't allow localStorage in their code runners

const shoppingCart = (function() {

  // =============================
  // Private methods and properties
  // =============================
  let cart = [];
  // Constructor
  class Item {
    constructor(name, price, count, image) {
      this.name = name;
      this.price = price;
      this.count = count;
      this.image = image;
    }
  }

  // Save cart
  function saveCart() {
    localStorage.setItem('shoppingCart', JSON.stringify(cart));
  }

  // Load cart
  function loadCart() {
     cart = JSON.parse(localStorage.getItem('shoppingCart'));
  }
  if (localStorage.getItem("shoppingCart") != null) {
    loadCart();
  }


  // =============================
  // Public methods and properties
  // =============================
  const obj = {};

  // Add to cart
  obj.addItemToCart = function(name, price, count, image) {
  debugger
    for (let item in cart) {
      if (cart[item].name === name) {
        cart[item].count += count ||  1
        saveCart();
        return;
      }
    }
    let item = new Item(name, price, count, image);
    cart.push(item);
    saveCart();
  }
  // Set count from item
  obj.setCountForItem = function(name, count) {
    for (let i in cart) {
      if (cart[i].name === name) {
        cart[i].count = count;
        break;
      }
    }
  };
  // Remove item from cart
  obj.removeItemFromCart = function(name) {
    for (let item in cart) {
      if (cart[item].name === name) {
        cart[item].count--;
        if (cart[item].count === 0) {
          cart.splice(item, 1);
        }
        break;
      }
    }
    saveCart();
  }

  // Remove all items from cart
  obj.removeItemFromCartAll = function(name) {
    for (let item in cart) {
      if (cart[item].name === name) {
        cart.splice(item, 1);
        break;
      }
    }
    saveCart();
  }

  // Clear cart
  obj.clearCart = function() {
    cart = [];
    saveCart();
  }

  // Count cart 
  obj.totalCount = function() {
    let totalCount = 0;
    for (let item in cart) {
      totalCount += cart[item].count;
    }
    return totalCount;
  }

  // Total cart
  obj.totalCart = function() {
    let totalCart = 0;
    for (let item in cart) {
      totalCart += cart[item].price * cart[item].count;
    }
    return Number(totalCart.toFixed(2));
  }

  // List cart
  obj.listCart = function() {
    let cartCopy = [];
    for (let i in cart) {
      let item = cart[i];
      itemCopy = {};
      for (let p in item) {
        itemCopy[p] = item[p];
      }
      itemCopy.total = Number(item.price * item.count).toFixed(2);
      cartCopy.push(itemCopy)
    }
    return cartCopy;
  }

  // cart : Array
  // Item : Object/Class
  // addItemToCart : Function
  // removeItemFromCart : Function
  // removeItemFromCartAll : Function
  // clearCart : Function
  // countCart : Function
  // totalCart : Function
  // listCart : Function
  // saveCart : Function
  // loadCart : Function
  return obj;
})();


// *****************************************
// Triggers / Events
// ***************************************** 
// Add item
$('.additem').click(function(event) {
  event.preventDefault();
  let name = $(this).data('name');
  let price = parseInt($(this).data('price'));
  let image = $(this).parents("div.card").find(".card-img-top").attr('src')
  let count = parseInt($(this).parents("div.card").find(".item-count").val());
  shoppingCart.addItemToCart(name, price, count, image);
  displayCart();
});

// Clear items
$('.clear-cart-items').click(function() {
  shoppingCart.clearCart();
  displayCart();
});


function displayCart() {
  let cartArray = shoppingCart.listCart();
  let output = "";
  for (let i in cartArray) {
    output += "<tr class='cartTable'>" +
      "<td><img src='" + cartArray[i].image + "' style='width:150px;'></td>" +
      "<td class='TableTitle'>" + cartArray[i].name + "</td>" +
      "<td>" + cartArray[i].price + "</td>" +
      "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name='" + cartArray[i].name + "'>-</button>" +
      "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>" +
      "<button class='plus-item btn btn-primary input-group-addon' data-name='" + cartArray[i].name + "'>+</button></div></td>" +
      "<td><button class='delete-item btn btn-danger' data-name='" + cartArray[i].name + "'>X</button></td>" +
      " = " +
      "<td>" + cartArray[i].total + "</td>" +
      "</tr>";

  }
  $('.show-cart').html(output);
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
}


// Delete item button

$('.show-cart').on("click", ".delete-item", function(event) {
  let name = $(this).data('name')
  shoppingCart.removeItemFromCartAll(name);
  displayCart();
})

//These are the codes of the internal input, the input of the cart
//This input works well and the buttons are as well. When you 
//click 
// each button, the value is provided
// -1
$('.show-cart').on("click", ".minus-item", function(event) {
  let name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
})


// +1
$('.show-cart').on("click", ".plus-item", function(event) {
debugger;
  let name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
})


// Item count input
$('.show-cart').on("change", ".item-count", function(event) {
  let name = $(this).data('name');
  let count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
});


displayCart();


//These are the codes of the external input, the input of the card
//here the buttons + - work fine but the input value is not added to the cart, only one product is added, even if the input value is 10

function increaseCount(a, b) {
  let input = b.nextElementSibling;
  let value = parseInt(input.value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  input.value = value;
  displayCart();
}

function decreaseCount(a, b) {
  debugger;
  let input = b.previousElementSibling;
  let value = parseInt(input.value, 10);
  if (value > 1) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
  }
}

<div class="ourproducts">
  <div class="card">
    <img class="card-img-top" width="50px" height="50px" src="https://pngpress.com/wp-content/uploads/2020/08/uploads_guava_guava_PNG60.png" alt="product-img" data-hook="product-image">
    <div class="setproprice">
      <div class="proprice">
        <span class="spanpropreice1">Offer</span><span class="card-text">1.50</span>
      </div>
    </div>
    <div class="protext">
      <span>Germany</span>
      <h2 class="card-title">Product-name</h2>
      <span>weight</span>
      <span>tax</span>
    </div>
    <fieldset class="card-block" data-hook="product-item-quantity-counter" aria-label="select the quantity" dir="rtl" data-error="false">

      <div>
        <button class="plus-item" data-name=`cartArray[i].name` onClick='increaseCount(event, this)'><span data-name="cartArray[i].name" class="material-icons plus-item">
            add
          </span></button>

        <input type="number" class="item-count" value="1" data-name="cartArray[i].name" min="1" max="20" step="1">

        <button class="minus-item" data-name="cartArray[i].name" onClick='decreaseCount(event, this)' value="1"><span data-name="cartArray[i].name" class="material-icons minus-item">
            remove
          </span></button>
      </div>
    </fieldset>
    <button class="additem" data-name="tne name of the product" data-price="2.00"> Add Item<span class="material-icons">
        shopping_cart
      </span></button>
  </div>

</div>
<table class="show-cart">

</table>
<div>
  <p>
  </p>
  <container>Total amount: <item class="total-cart">0
    </item>
  </container>
  <p></p>
  <container>Number of Items: <item class="total-count">0
    </item>
  </container>
</div>

I hope this helps

Answered By - Patrick Hume

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

What is the error in the input card codes

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels