HTML / JavaScriptのみを使用してショッピングカートを作成する
このプロジェクトを完了するために何をすべきかわかりません。 HTMLページを1つだけ使用するショッピングカートを作成する必要があります。私は販売されているものを示すテーブルをセットアップしましたが、私が失われたのは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);
}
直接ファイルはこちら
ペーストビン： http://Pastebin.com/sutGWjSY
simpleCart を使用するだけです
これは無料でオープンソースのJavaScriptショッピングカートであり、現在のWebサイトと簡単に統合できます。
完全なソースコードは github で入手できます。
このサイズのプロジェクトの場合、純粋な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を見ると、ItemsというIDを持つテーブルを定義しているようにも見えませんか？たぶんそれがうまくいかないのですか？
生データで作業を開始し、それを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）は、組み込みのPaypal統合を備えたJavaScriptで記述されたレスポンシブ、ハンドルバーおよびJSONベースのEコマースショッピングカートです。
ドキュメント
http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html
それがあなたの役に立つことを願っています。