How can the product image be called through JavaScript, so that it appears in the cart, what is the appropriate code..

This is the html code ............................................................................

<div >
  <div  >
      <img   src="images/tomaten.png" alt="product-img" data-hook="product-image">
     <div >
       <div >
          <span >Offer</span><span >1.50</span>
       </div>
     </div>
      <div >
          <span>Germany</span>
          <h2   >Product-name</h2>
           <span>weight</span>
           <span>tax</span>
      </div>
      <fieldset   data-hook="product-item-quantity-counter" 
      aria-label="select the quantity" dir="rtl" data-error="false">

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

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

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

</div> 

and This is the js code

  // Shopping Cart API
  // ************************************************
  
  var shoppingCart = (function() {
   
   // =============================
   // Private methods and propeties
   // =============================
   cart = [];
   // Constructor
   function Item( name, price, count) {
     this.name = name;
     this.price = price;
     this.count= count
   }
   
   // 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) {
     for(var item in cart) {
       if(cart[item].name === name) {
         cart[item].count   ;
         saveCart();
         return;
       }
     }
     var item = new Item(name, price, count);
     cart.push(item);
     saveCart();
   }


// Add item
  $('.additem').click(function(event) {
   event.preventDefault();
   var name = $(this).data('name');
   var price = Number($(this).data('price'));
   shoppingCart.addItemToCart(name, price, 1 );
   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 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());
      }

I want to put a suitable code, so that it displays the product image here with the rest of the elements

  function displayCart() {
  
   var cartArray = shoppingCart.listCart();
   var output = "";
   for(var i in cartArray) {
        output  = "<tr class='cartTable'>" 
         "<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());
  }

CodePudding user response：

you need to change your code a bit to pass it though, a bit like the following...

function Item( name, price, count, image) {
     this.name = name;
     this.price = price;
     this.count= count;
     this.image = image
   }

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

$('.additem').click(function(event) {
   event.preventDefault();
   var name = $(this).data('name');
   var price = Number($(this).data('price'));
   var image  = $(this).parents("div.ourproducts").find(".card-img-top").attr('src')
   shoppingCart.addItemToCart(name, price, 1 ,image );
   displayCart();
  });

then just add the image into your displayCart string append

(I have updated the below line )

 "<td><img src='"   cartArray[i].image   "' alt='product-img' data-hook='product-image'></td>"   

I hope this helps