Создание корзины с использованием только HTML/JavaScript

Question

Я не уверен, что делать, чтобы завершить этот проект. Мне нужно создать корзину покупок, которая использует только одну страницу HTML. У меня есть таблица, показывающая, что продается, но где я потерялся, это JavaScript.

Я не знаю, как связать кнопку «Добавить в корзину» со всеми необходимыми данными (название, описание и цена), чтобы добавить его в корзину. Мне не нужно удалять его из корзины, но он должен показывать общее количество. После поиска в Интернете нескольких ответов я пробовал некоторые вещи, но просто не могу понять это.

Любая помощь, безусловно, оценена, потому что я полностью потеряна в этот момент и новичок в JavaScript в целом.

Это jsFiddle, но это было немного запутанным для меня, потому что это по-разному работать там, чем если бы я просто пошел работать в 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); 
} 

Прямой файл здесь

Pastebin: 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, это даже не похоже на то, что вы определили таблицу с идентификационными элементами? Может быть, поэтому это не работает?

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) является отзывчивым, рулевым управлением & JSON, электронная корзина покупок, написанная на JavaScript с встроенной интеграцией PayPal.

Документация

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

Надеется, что вы найдете ее полезной.