仅使用 HTML/JavaScript 创建购物车
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16293977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a Shopping Cart using only HTML/JavaScript
提问by user2334778
I'm not sure what to do in order to complete this project. I need to create a shopping cart that uses only one HTML page. I have the table set up showing what is being sold but where I am lost is the JavaScript.
我不知道该怎么做才能完成这个项目。我需要创建一个仅使用一个 HTML 页面的购物车。我已经设置了表格，显示正在销售的内容，但我丢失的地方是 JavaScript。
I don't know how to link the "Add to Cart" button with all the necessary data( The name, description, and price) to be able to add it to the cart. I don't need to be able to remove it from the cart, but it does need to show the total. After searching online for a few answers, I've tried some things but just cannot figure it out.
我不知道如何将“添加到购物车”按钮与所有必要的数据（名称、描述和价格）相关联，以便能够将其添加到购物车中。我不需要能够将它从购物车中删除，但它确实需要显示总数。在网上搜索了一些答案后，我尝试了一些东西，但就是无法弄清楚。
Any help is definitely appreciated because I am completely lost at this point and am new to JavaScript in general.
绝对感谢任何帮助，因为此时我完全迷失了，并且一般来说是 JavaScript 的新手。
This is the jsFiddle but that was a little confusing to me, because it's working differently on there than if I just went to Run in Notepad++
这是 jsFiddle 但这对我来说有点困惑，因为它在那里的工作方式与我在 Notepad++ 中运行时不同
jsFiddle: http://jsfiddle.net/renavi/ATjvt/5/
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);
}
The direct file is here
直接文件在这里
Pastebin: http://pastebin.com/sutGWjSY
Pastebin：http: //pastebin.com/sutGWjSY
回答by Anil
You simply need to use simpleCart
你只需要使用simpleCart
It is a free and open-source javascript shopping cartthat easily integrates with your current website.
它是一个免费的开源 javascript购物车，可轻松与您当前的网站集成。
You will get the full source code at github
您将在github 上获得完整的源代码
回答by Alexander Kuzmin
For a project this size, you should stop writing pure JavaScript and turn to some of the libraries available. I'd recommend jQuery (http://jquery.com/), which allows you to select elements by css-selectors, which I recon should speed up your development quite a bit.
对于这种规模的项目，您应该停止编写纯 JavaScript 并转向一些可用的库。我推荐 jQuery ( http://jquery.com/)，它允许您通过 css-selectors 选择元素，我认为这应该会大大加快您的开发速度。
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 can see that you might not understand that code yet, but take a look at jQuery, it's easy to learn and will make this development way faster.
我可以看到您可能还没有理解该代码，但是看看 jQuery，它很容易学习并且会使这种开发方式更快。
I would use the libraries already created specifically for js shopping carts if I were you though.
如果我是你，我会使用已经专门为 js 购物车创建的库。
To your problem; If i look at your jsFiddle, it doesn't even seem like you have defined a table with the id Items? Maybe that's why it doesn't work?
你的问题；如果我查看您的 jsFiddle，您似乎甚至没有定义一个带有 id Items 的表？也许这就是它不起作用的原因？
回答by Gregory Movsesyan
I think it is a better idea to start working with a raw data and then translate it to DOM (document object model)
我认为最好先处理原始数据，然后将其转换为 DOM（文档对象模型）
I would suggest you to work with array of objects and then output it to the DOM in order to accomplish your task.
我建议您使用对象数组，然后将其输出到 DOM 以完成您的任务。
You can see working example of following code at http://www.softxml.com/stackoverflow/shoppingCart.htm
您可以在http://www.softxml.com/stackoverflow/shoppingCart.htm查看以下代码的工作示例
You can try 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 have a look at following free client-side shopping cart:
请查看以下免费客户端购物车：
SoftEcart(js)is a Responsive, Handlebars & JSON based, E-Commerce shopping cart written in JavaScript with built-in PayPal integration.
SoftEcart(js)是一个响应式、基于把手和 JSON 的电子商务购物车，用 JavaScript 编写，内置 PayPal 集成。
Documentation
文档
http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html
http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html
Hope you will find it useful.
希望你会发现它很有用。
