Criar um carrinho de compras usando apenas HTML / JavaScript
Eu não sei como ligar o botão "Adicionar ao carrinho" com todos os dados necessários( o nome, descrição e preço) para ser capaz de adicioná-lo ao carrinho. Eu não preciso ser capaz de removê-lo do carrinho, mas ele precisa mostrar o total. Após a pesquisa 'online' para algumas respostas, tentei algumas coisas, mas não consegui perceber.
qualquer ajuda é definitivamente apreciada porque eu estou completamente perdido neste momento e sou novo para JavaScript em geral.
Este é o jsFiddle,mas isso foi um pouco confuso para mim, porque está a funcionar de forma diferente lá do que se eu fosse correr no 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);
}
o ficheiro directo está aqui
Pastebin: http://pastebin.com/sutGWjSY
3 answers
Só precisa de utilizar simpleCart
É um javascript livre e de código aberto carrinho de compras {[7] } que facilmente se integra com o seu site actual.
Terás o código fonte completo em github
Para um projecto deste tamanho, deve parar de escrever JavaScript puro e voltar para algumas das bibliotecas disponíveis. Eu recomendaria jQuery ([3]) http://jquery.com/), que lhe permite seleccionar elementos por selectores de css, os quais devem acelerar bastante o seu desenvolvimento.
O exemplo do seu código torna-se então;
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);
}
Para o teu problema; se eu olhar para o teu jsFiddle, parece que nem sequer definiste uma tabela com os itens de identificação? Talvez seja por isso que não funciona?
Acho que é melhor começar a trabalhar com dados brutos e depois traduzi - los para DOM (document object model)
Eu sugeria que trabalhasses com uma série de objectos e depois a entregasses ao DOM para cumprires a tua tarefa.Pode ver o exemplo de trabalho do seguinte código em http://www.softxml.com/stackoverflow/shoppingCart.htm
Pode tentar a seguinte abordagem:
//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>
Por favor, dê uma vista de olhos nas seguintes compras gratuitas do lado do cliente cart:
SoftEcart (js) é um carrinho de compras responsivo, baseado em Handlebars & JSON, e-Commerce escrito em JavaScript com integração de PayPal incorporada.
Documentação
Http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html
Espero que o ache útil.