0

The following array features objects which are the product items. Clicking at the Add to cart button should render the related item into a table presentation via the mytable function as shown further below.

var product = [
  {"name":"jeans","image":"pics/jeans3.jpg","price":500},
  {"name":"hoodie","image":"pics/hoodie.jpg","price":700},
  {"name":"shirt","image":"pics/shirt.jpg","price":450},
  {"name":"sweter","image":"pics/sweter.jpg","price":1100},
  {"name":"trouser","image":"pics/trouser.jpg","price":600},
  {"name":"tshirt","image":"pics/tshirt.jpg","price":250}
];

Here is the loop which is supposed to create the product overview (event handling inclusive) from the above provided data.

var head = "<div id='main'>";

for (var i in product) {
  head += "<div class='pro'>";
  head += "<h1>" + product[i].name + "</h1>";
  head += "<img src=" + product[i].image + ">";
  head += "<p>" + product[i].price + "</p>";
  head += "<button onclick='mytable(i)'>Add to cart</button>"
  head += "</div>";
}

And here is the rest of the above code which is expected to write the product overview to the document. There is also the above mentioned mytable function which is supposed to create an items shopping cart presentation (event handling inclusive).

head += "</div>";
head += "<div id='cart'> </div>"
document.write(head);

function mytable(i) {
     document.getElementById('cart').innerHTML = "<table border='1'> <tr><th>Product name</th>  <th>Quantity</th>  <th>Price</th> <th>image</th><th><button>Remove Items</button></th></tr></table>";
}

Additionally I want to handle the removal of a cart item. For both cases adding and removing items to/from the cart I want to calculate the total price of all cart items.

How could one achieve this?

Peter Seliger
  • 11,747
  • 3
  • 28
  • 37
fazal
  • 43
  • 7
  • 1
    Hi ! So far so good :) Please provide us your attempts in javascript. – Philippe Oct 11 '21 at 09:33
  • 1
    What is 'cart'? Your question is not clear. – Wimanicesir Oct 11 '21 at 09:36
  • like in shopping website there is a " button add to cart " when we click on that the data will be automatically added to the cart - @wimanicesir – fazal Oct 11 '21 at 09:42
  • I know the functionality of a cart. I mean what is cart in your project? Do you want to save it in localstorage? Do you want to show it HTML? What is the problem you encountered? – Wimanicesir Oct 11 '21 at 09:56
  • i want to show it in html ,as i click the add to cart button nothing is executed @Wimanicesir – fazal Oct 11 '21 at 12:13
  • Most probably the user is looking for something similar to ... [*"How does one establish state-management in between a list of data-items and their element-node representatives in case of removing an item on 'click'?"*](https://stackoverflow.com/questions/69404034/how-does-one-establish-state-management-in-between-a-list-of-data-items-and-thei) – Peter Seliger Oct 11 '21 at 13:12
  • Maybe the most important thing was to provide with the initial data for each product a product id `pid` in order to identify rendered shopping items (main product view or cart view) and the related model data (here so far the OP's very basic product list). This ID also is vital in order to keep the client-side shopping-representation synchronized with the server-state. – Peter Seliger Oct 11 '21 at 13:28
  • The OP also does not want to use `
    ` in order to present a shopping cart. For both different presentations of one and the same product, a list item ... `
  • ` ... is perfectly suited. Thus the product and the cart view should be rendered each into an un/ordered list. – Peter Seliger Oct 11 '21 at 20:56