僅使用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

希望你會發現它是有用的。