仅使用HTML/JavaScript创建购物车

Question

我不确定要完成此项目该怎么做。我需要创建一个仅使用一个HTML页面的购物车。我设置了表格，显示出售的是什么，但我丢失的是JavaScript。

我不知道如何链接“添加到购物车”按钮与所有必要的数据（名称，描述和价格），以便能够将其添加到购物车。我不需要将它从购物车中移除，但它确实需要显示总计。在网上搜索一些答案之后，我尝试了一些东西，但无法弄清楚。

任何帮助肯定是赞赏的，因为我完全失去了这一点，并且通常是JavaScript的新手。

这是的jsfiddle但是这是一个有点混乱给我，因为它在那里工作不同于如果我只是去在记事本++

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

直接文件这里

引擎收录：http://pastebin.com/sutGWjSY

Answer 1

您只需使用simpleCart

这是一个免费且开放源代码的javascript 购物车，它可以轻松地与您当前的网站集成。

你会得到github

Answer 2

的全部源代码对于一个项目的这种规模，你应该停止写纯JavaScript和转向一些可用的库。我推荐jQuery（http://jquery.com/），它允许你通过css-selectors来选择元素，我认为这应该会加快你的开发速度。

您的代码的示例然后成为;

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

我可以看到，你可能不明白的代码还，但看看jQuery的，很容易学习，将会使这种发展方式更快。

我会使用已经专门为js购物车创建的库，如果我是你的话。

给你的问题;如果我看着你的jsFiddle，它甚至不像你已经定义了一个ID为Item的表？也许这就是为什么它不起作用？

Answer 3

我认为这是一个好主意，开始用原始数据的工作，然后将其转化为DOM（文档对象模型）

我会建议你使用对象的数组工作，然后将其输出到DOM为了完成你的任务。

你可以看到在http://www.softxml.com/stackoverflow/shoppingCart.htm

工作的下面的代码示例，您可以尝试以下方法：

//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> 

请看看以下免费客户端的购物车：

SoftEcart （js）是一款响应式Handlebars &基于JSON的电子商务购物车，采用内置PayPal集成的JavaScript编写。

文档

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

希望你会发现它是有用的。