Creating a shopping cart using only HTML / JavaScript

Question

I am not sure what to do to complete this project. I need to create a shopping cart that uses only one HTML page. I have a table showing what is for sale, but where I got lost is JavaScript.

I don’t know how to link the "Add to Cart" button with all the necessary data (name, description and price) to add it to the cart. I do not need to remove it from the basket, but it should show the total. After searching the Internet for a few answers, I tried some things, but just can't figure it out.

Any help is definitely appreciated because I am completely lost at this point and new to JavaScript in general.

This is jsFiddle, but it was a little confusing to me because it works differently than if I just went into "Running in Notepad ++"

jsFiddle: http://jsfiddle.net/renavi/ATjvt/5/

function AddtoCart() { console.log('hi'); var x = document.getElementById('Items'); var new_row = x.rows[1].cloneNode(true); var len = x.rows.length; new_row.cells[0].innerHTML = len; var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; inp1.id += len; inp1.value = ''; var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; inp2.id += len; inp2.value = ''; x.appendChild(new_row); } 

Direct file is here

Pastebin: http://pastebin.com/sutGWjSY

Answer 1

You just need to use simpleCart

This is a free and open source javascript shopping basket that integrates seamlessly with your current site.

You will get the complete github source code

Answer 2

For a project of this size, you should stop writing pure JavaScript and go to some available libraries. I would recommend jQuery ( http://jquery.com/ ), which allows you to select elements with css selectors, which I am reconstructing to speed up development a bit.

An example of your code then becomes;

 function AddtoCart() { var len = $("#Items tr").length, $row, $inp1, $inp2, $cells; $row = $("#Items td:first").clone(true); $cells = $row.find("td"); $cells.get(0).html( len ); $inp1 = $cells.get(1).find("input:first"); $inp1.attr("id", $inp1.attr("id") + len).val(""); $inp2 = $cells.get(2).find("input:first"); $inp2.attr("id", $inp2.attr("id") + len).val(""); $("#Items").append($row); } 

I see that you still can’t understand this code, but look at jQuery, it learns easily and speeds up this development.

I would use libraries created specifically for js baskets if you were you.

To your problem; If I look at your jsFiddle, it doesn't even look like you defined a table with identification elements? Maybe why it doesn't work?

Answer 3

I think it’s better to start working with raw data, and then translate it into the DOM (document object model).

I suggest you work with an array of objects, and then output it to the DOM to complete your task.

You can see a working example of the following code at http://www.softxml.com/stackoverflow/shoppingCart.htm

You can try the following approach:

 //create array that will hold all ordered products var shoppingCart = []; //this function manipulates DOM and displays content of our shopping cart function displayShoppingCart(){ var orderedProductsTblBody=document.getElementById("orderedProductsTblBody"); //ensure we delete all previously added rows from ordered products table while(orderedProductsTblBody.rows.length>0) { orderedProductsTblBody.deleteRow(0); } //variable to hold total price of shopping cart var cart_total_price=0; //iterate over array of objects for(var product in shoppingCart){ //add new row var row=orderedProductsTblBody.insertRow(); //create three cells for product properties var cellName = row.insertCell(0); var cellDescription = row.insertCell(1); var cellPrice = row.insertCell(2); cellPrice.align="right"; //fill cells with values from current product object of our array cellName.innerHTML = shoppingCart[product].Name; cellDescription.innerHTML = shoppingCart[product].Description; cellPrice.innerHTML = shoppingCart[product].Price; cart_total_price+=shoppingCart[product].Price; } //fill total cost of our shopping cart document.getElementById("cart_total").innerHTML=cart_total_price; } function AddtoCart(name,description,price){ //Below we create JavaScript Object that will hold three properties you have mentioned: Name,Description and Price var singleProduct = {}; //Fill the product object with data singleProduct.Name=name; singleProduct.Description=description; singleProduct.Price=price; //Add newly created product to our shopping cart shoppingCart.push(singleProduct); //call display function to show on screen displayShoppingCart(); } //Add some products to our shopping cart via code or you can create a button with onclick event //AddtoCart("Table","Big red table",50); //AddtoCart("Door","Big yellow door",150); //AddtoCart("Car","Ferrari S23",150000); <table cellpadding="4" cellspacing="4" border="1"> <tr> <td valign="top"> <table cellpadding="4" cellspacing="4" border="0"> <thead> <tr> <td colspan="2"> Products for sale </td> </tr> </thead> <tbody> <tr> <td> Table </td> <td> <input type="button" value="Add to cart" onclick="AddtoCart('Table','Big red table',50)"/> </td> </tr> <tr> <td> Door </td> <td> <input type="button" value="Add to cart" onclick="AddtoCart('Door','Yellow Door',150)"/> </td> </tr> <tr> <td> Car </td> <td> <input type="button" value="Add to cart" onclick="AddtoCart('Ferrari','Ferrari S234',150000)"/> </td> </tr> </tbody> </table> </td> <td valign="top"> <table cellpadding="4" cellspacing="4" border="1" id="orderedProductsTbl"> <thead> <tr> <td> Name </td> <td> Description </td> <td> Price </td> </tr> </thead> <tbody id="orderedProductsTblBody"> </tbody> <tfoot> <tr> <td colspan="3" align="right" id="cart_total"> </td> </tr> </tfoot> </table> </td> </tr> </table> 

Please look at the free client basket:

SoftEcart (js) is responsive , Handlebars and JSON, based on E-Commerce shopping cart, written in JavaScript with built-in PayPal integration.

Documentation

http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html

I hope you find this helpful.