La création d'un Panier en utilisant uniquement du HTML/JavaScript

Je ne sais pas quoi faire pour mener à bien ce projet. J'ai besoin de créer un panier d'achat qui utilise une seule page HTML. J'ai une table montrant ce qui est vendu, mais là où je suis perdu, c'est le JavaScript.

Je ne sais pas comment le lien "Ajouter au Panier" bouton avec toutes les données nécessaires( le nom, La description et le prix) pour être en mesure de l'ajouter au panier. Je n'ai pas besoin d'être en mesure de le retirer de la charrette, mais il n'a pas besoin de montrer au total. Après une recherche en ligne pour un peu de réponses, j'ai essayé certaines choses, mais juste ne peut pas le comprendre.

Toute aide est certainement apprécié parce que je suis complètement perdu à ce point et je suis nouveau sur le JavaScript en général.

C'est le jsFiddle mais c'était un peu confus pour moi, parce que c'est de travailler différemment sur que si je suis juste allé à Exécuter dans 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);
}

Le fichier direct est ici

Pastebin: http://pastebin.com/sutGWjSY

OriginalL'auteur user2334778 | 2013-04-30

  1. 8

    Vous devez simplement utiliser simpleCart

    Il est un libre et open-source javascript panier qui s'intègre facilement à votre site web actuel.

    Vous obtiendrez le code source complet à github

    J'ai déjà essayé, mais ça doit être dans un fichier HTML + je n'arrive toujours pas à comprendre comment obtenir les informations à partir d'un tableau à l'autre. Il a pour ressembler à la façon dont je l'ai créée, je ne sais juste pas la partie JavaScript pour obtenir le droit de travailler. Désolé, j'aurais mentionné exactement ce que j'avais essayé.
    Il ne fonctionne pas... je veux dire chariot n'est pas mis à jour.
    J'ai trouvé ce en 2018 et a remarqué que les fichiers téléchargés ont été créés en 2013. Des pensées ou des recommandations?

    OriginalL'auteur Anil

  2. 2

    Pour un projet de cette taille, vous devriez arrêter d'écrire JavaScript et de se tourner vers les bibliothèques disponibles. Je le recommande jQuery (http://jquery.com/), qui permet de sélectionner des éléments en css-sélecteurs, je recon devrait accélérer votre développement tout à fait un peu.

    Exemple de votre code devient alors;

    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);
    }

    Je vois que vous ne comprenez pas que le code, mais jetez un oeil à jQuery, il est facile à apprendre et qu'il va faire cette mise au point plus rapide.

    Je voudrais utiliser les bibliothèques déjà créé spécifiquement pour les js caddies si j'étais vous, si.

    À votre problème; Si je regarde votre jsFiddle, il n'a même pas à croire que vous avez défini une table avec l'id des Objets? Peut-être que c'est pourquoi il ne fonctionne pas?

    Merci pour la suggestion, c'est pas que je ne veux pas utiliser quelque chose de plus simple ou de quelque chose qui pourrait fonctionner mieux. Il nous a été dit, nous avons eu à le faire de cette façon spécifique ou nous perdre des points. Il n'a pas enseigner quoi que ce soit vraiment, il nous a donné le JavaScript que nous étions censés utiliser, mais comme je n'avais pas d'un ordinateur portable pour une raison quelconque, mon ami a pensé qu'il serait intelligent de supprimer le fichier qu'il nous a donné.. Il a dit essentiellement que nous avons à faire cela dans un fichier HTML, à l'aide de JavaScript et non pas à l'aide de cadres.

    OriginalL'auteur Alexander Kuzmin

  3. 1

    Je pense que c'est une meilleure idée de commencer à travailler avec les données brutes, puis de le traduire à DOM (document object model)

    Je vous suggère de travailler avec un tableau d'objets, puis la sortie vers les DOM dans le but d'accomplir votre tâche.

    Vous pouvez voir l'exemple de code suivant à http://www.softxml.com/stackoverflow/shoppingCart.htm

    Vous pouvez essayer la méthode suivante:

    //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>

    Jetez un oeil à la suite de libre-côté client panier:

    SoftEcart(js) est un Réactif, le Guidon & JSON en fonction, E-Commerce panier écrite en JavaScript avec construit-dans l'intégration de PayPal.

    Documentation

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

    Espérons que vous le trouverez utile.

    Ce code n'est pas très disponible en fait. La démo semble bon, mais vous devez vous inscrire pour obtenir le téléchargement.
    Ce script fonctionne très bien pour moi, je ne sais pas qui et pourquoi a donné vote.

    OriginalL'auteur Gregory Movsesyan