web-dev-qa-db-fra.com

Créer un panier en utilisant uniquement 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 mis la table en place montrant ce qui est vendu, mais où je suis perdu, c'est le JavaScript.

Je ne sais pas comment associer le bouton "Ajouter au panier" à toutes les données nécessaires (nom, description et prix) pour pouvoir l'ajouter au panier. Je n'ai pas besoin de pouvoir le retirer du panier, mais il doit afficher le total. Après avoir cherché quelques réponses en ligne, j'ai essayé certaines choses, mais je n'arrive pas à comprendre. 

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

C’est le jsFiddle, mais c’était un peu déroutant pour moi, parce que cela fonctionne différemment que si je venais d’exécuter dans Exécuter dans le bloc-notes ++ 

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

javascripthtmlarrayshtml-tablecart
4
user2334778

Vous devez simplement utiliser simpleCart

C'est un javascript gratuit et open-source panier qui s'intègre facilement à votre site Web actuel.

Vous obtiendrez le code source complet sur github

8
Anil

Pour un projet de cette taille, vous devez arrêter d'écrire du code JavaScript pur et vous tourner vers certaines des bibliothèques disponibles. Je recommande jQuery ( http://jquery.com/ ), qui vous permet de sélectionner des éléments à l'aide de sélecteurs css, ce qui, je le reconnais, devrait accélérer un peu votre développement.

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 peut-être pas encore ce code, mais jetez un oeil à jQuery, il est facile à apprendre et rendra ce développement plus rapide. 

J'utiliserais les bibliothèques déjà créées spécialement pour les paniers js si j'étais vous.

À votre problème Si je regarde votre jsFiddle, il ne semble même pas que vous ayez défini une table avec les éléments id? Peut-être que c'est pour ça que ça ne marche pas?

2
Alexander Kuzmin

Je pense que c'est une meilleure idée de commencer à travailler avec des données brutes, puis de les traduire en DOM (modèle d'objet document)

Je vous suggérerais de travailler avec un tableau d'objets et de le sortir ensuite dans le DOM afin d'accomplir votre tâche.

Vous pouvez voir un exemple de travail du code suivant à l’adresse http://www.softxml.com/stackoverflow/shoppingCart.htm

Vous pouvez essayer l'approche 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>

Consultez le panier gratuit suivant:

SoftEcart (js) est un caddie E-Commerce basé sur un guidon et basé sur JSON, écrit en JavaScript avec une intégration Paypal intégrée.

Documentation

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

J'espère que vous le trouverez utile.

1
Gregory Movsesyan