仅使用 HTML/JavaScript 创建购物车

Posted 2023-03-05

【中文标题】仅使用 HTML/JavaScript 创建购物车

【英文标题】：Creating a Shopping Cart using only HTML/JavaScript

【发布时间】：2013-04-24 00:34:51

【问题描述】：

我不知道该怎么做才能完成这个项目。我需要创建一个只使用一个 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

【参考方案1】：

这是一个使用 Javascript 和 localStorage 编写的单页购物车。这是一个完整的工作pen。以前在Codebox上找到的

cart.js

var cart = 
  // (A) PROPERTIES
  hPdt : null, // HTML products list
  hItems : null, // HTML current cart
  items : , // Current items in cart

  // (B) LOCALSTORAGE CART
  // (B1) SAVE CURRENT CART INTO LOCALSTORAGE
  save : function () 
    localStorage.setItem("cart", JSON.stringify(cart.items));
  ,

  // (B2) LOAD CART FROM LOCALSTORAGE
  load : function () 
    cart.items = localStorage.getItem("cart");
    if (cart.items == null)  cart.items = ; 
    else  cart.items = JSON.parse(cart.items); 
  ,

  // (B3) EMPTY ENTIRE CART
  nuke : function () 
    if (confirm("Empty cart?")) 
      cart.items = ;
      localStorage.removeItem("cart");
      cart.list();
    
  ,

  // (C) INITIALIZE
  init : function () 
    // (C1) GET HTML ELEMENTS
    cart.hPdt = document.getElementById("cart-products");
    cart.hItems = document.getElementById("cart-items");

    // (C2) DRAW PRODUCTS LIST
    cart.hPdt.innerHTML = "";
    let p, item, part;
    for (let id in products) 
      // WRAPPER
      p = products[id];
      item = document.createElement("div");
      item.className = "p-item";
      cart.hPdt.appendChild(item);

      // PRODUCT IMAGE
      part = document.createElement("img");
      part.src = "images/" +p.img;
      part.className = "p-img";
      item.appendChild(part);

      // PRODUCT NAME
      part = document.createElement("div");
      part.innerHTML = p.name;
      part.className = "p-name";
      item.appendChild(part);

      // PRODUCT DESCRIPTION
      part = document.createElement("div");
      part.innerHTML = p.desc;
      part.className = "p-desc";
      item.appendChild(part);

      // PRODUCT PRICE
      part = document.createElement("div");
      part.innerHTML = "$" + p.price;
      part.className = "p-price";
      item.appendChild(part);

      // ADD TO CART
      part = document.createElement("input");
      part.type = "button";
      part.value = "Add to Cart";
      part.className = "cart p-add";
      part.onclick = cart.add;
      part.dataset.id = id;
      item.appendChild(part);
    

    // (C3) LOAD CART FROM PREVIOUS SESSION
    cart.load();

    // (C4) LIST CURRENT CART ITEMS
    cart.list();
  ,

  // (D) LIST CURRENT CART ITEMS (IN HTML)
  list : function () 
    // (D1) RESET
    cart.hItems.innerHTML = "";
    let item, part, pdt;
    let empty = true;
    for (let key in cart.items) 
      if(cart.items.hasOwnProperty(key))  empty = false; break; 
    

    // (D2) CART IS EMPTY
    if (empty) 
      item = document.createElement("div");
      item.innerHTML = "Cart is empty";
      cart.hItems.appendChild(item);
    

    // (D3) CART IS NOT EMPTY - LIST ITEMS
    else 
      let p, total = 0, subtotal = 0;
      for (let id in cart.items) 
        // ITEM
        p = products[id];
        item = document.createElement("div");
        item.className = "c-item";
        cart.hItems.appendChild(item);

        // NAME
        part = document.createElement("div");
        part.innerHTML = p.name;
        part.className = "c-name";
        item.appendChild(part);

        // REMOVE
        part = document.createElement("input");
        part.type = "button";
        part.value = "X";
        part.dataset.id = id;
        part.className = "c-del cart";
        part.addEventListener("click", cart.remove);
        item.appendChild(part);

        // QUANTITY
        part = document.createElement("input");
        part.type = "number";
        part.value = cart.items[id];
        part.dataset.id = id;
        part.className = "c-qty";
        part.addEventListener("change", cart.change);
        item.appendChild(part);

        // SUBTOTAL
        subtotal = cart.items[id] * p.price;
        total += subtotal;
      

      // EMPTY BUTTONS
      item = document.createElement("input");
      item.type = "button";
      item.value = "Empty";
      item.addEventListener("click", cart.nuke);
      item.className = "c-empty cart";
      cart.hItems.appendChild(item);

      // CHECKOUT BUTTONS
      item = document.createElement("input");
      item.type = "button";
      item.value = "Checkout - " + "$" + total;
      item.addEventListener("click", cart.checkout);
      item.className = "c-checkout cart";
      cart.hItems.appendChild(item);
    
  ,

  // (E) ADD ITEM INTO CART
  add : function () 
    if (cart.items[this.dataset.id] == undefined) 
      cart.items[this.dataset.id] = 1;
     else 
      cart.items[this.dataset.id]++;
    
    cart.save();
    cart.list();
  ,

  // (F) CHANGE QUANTITY
  change : function () 
    if (this.value == 0) 
      delete cart.items[this.dataset.id];
     else 
      cart.items[this.dataset.id] = this.value;
    
    cart.save();
    cart.list();
  ,
  
  // (G) REMOVE ITEM FROM CART
  remove : function () 
    delete cart.items[this.dataset.id];
    cart.save();
    cart.list();
  ,
  
  // (H) CHECKOUT
  checkout : function () 
    // SEND DATA TO SERVER
    // CHECKS
    // SEND AN EMAIL
    // RECORD TO DATABASE
    // PAYMENT
    // WHATEVER IS REQUIRED
    alert("TO DO");

    /*
    var data = new FormData();
    data.append('cart', JSON.stringify(cart.items));
    data.append('products', JSON.stringify(products));
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "SERVER-SCRIPT");
    xhr.onload = function() ... ;
    xhr.send(data);
    */
  
;
window.addEventListener("DOMContentLoaded", cart.init);

【参考方案2】：

我认为最好先处理原始数据，然后将其转换为 DOM（文档对象模型）

我建议您使用对象数组，然后将其输出到 DOM 以完成您的任务。

您可以在http://www.softxml.com/***/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 的电子商务购物车，用 JavaScript 编写，内置 PayPal 集成。

文档

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

希望你会发现它有用。

【讨论】：

这个代码实际上不是很可用。演示看起来不错，但您必须注册才能下载。

这个脚本对我来说很好，不知道是谁和为什么给的 - 投票。

【参考方案3】：

您只需要使用simpleCart

它是一个免费的开源 javascript 购物车，可轻松与您当前的网站集成。

您将在github获得完整的源代码

【讨论】：

我已经尝试过了，但是这一切都需要在一个 HTML 文件中 + 我仍然不知道如何从一个表中获取信息到另一个表中。它必须看起来像我已经设置的那样，我只是不知道 JavaScript 部分让它正常工作。抱歉，我应该确切地提到我尝试过的内容。

它不起作用...我的意思是购物车没有更新。

我在 2018 年发现了这个，并注意到下载的文件是在 2013 年创建的。有什么想法或建议吗？

【参考方案4】：

对于这种规模的项目，您应该停止编写纯 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 Items 的表？也许这就是它不起作用的原因？

【讨论】：

感谢您的建议，并不是我不想使用更简单或可能更好用的东西。我们只是被告知我们必须以这种特定的方式这样做，否则我们会失去积分。他实际上并没有教任何东西，他只是给了我们应该使用的 JavaScript，但由于我出于某种原因没有笔记本电脑，我的朋友认为删除他给我们的文件会很聪明。他基本上说我们必须在一个 HTML 文件中执行此操作，使用 JavaScript 而不是框架。