Idée pour sélectionner des produits et les ajouter

Bonsoir à tous,

alors voilà, j'aimerais avoir quelques idées pour réaliser le site suivant:

1) j'ai une fenêtre dans laquelle on peut choisir des produits (en fait, des type d'articles pour une facturation)

2) je voudrais avoir, en dessous, une liste des articles sélectionnés, avec la possibilité d'en retirer

j'ai déjà vu cela, sur des sites marchants, mais comment qui font 8O ??

merci de toute idée

En gros tu veux un panier quoi !:aie:

Voila un exemple tout bête compatible IE et FF, mais tu peux rajouter autant de produits que tu veux juste en rajoutant des <li>. Je suppose qu'il y a d'autres méthodes mais tu auras déjà celle là comme ça ^^.

- Ensuite tu peux vérifier si le produit1 est déjà dans la liste et si oui incrémenter une quantité à coter quand tu reclic sur son lien au lieu de recréer un nouveau "produit1" dans ton panier et par là même simplifier le code en utilisant un attribut "id" au lieu de "name", je te laisse ça, je voudrais pas te priver de travail ;) (pour détecter si produit1 est déjà présent, node.hasChildNodes() est ton ami)

-Pour éviter que le panier se vide quand tu actualise fait un cookie.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
  <head>
    <title>caddie de la mort qui tue</title>
    <script type=text/JavaScript>
      function ajouter(nom){
//création d'une balise div, de son attribut name et de la valeur de ce name,
// insertion de ce div dans le div "panier" 
//puis insertion du nom du produit dans le div nouvellement créer
        var divproduit = document.createElement("div");
        var nameproduit = document.createAttribute("name");
        nameproduit.nodeValue = nom;
        divproduit.setAttributeNode(nameproduit);
        document.getElementById("panier").appendChild(divproduit);
        var nomproduit = document.createTextNode(nom);
        var lgtblproduits = document.getElementsByName(nom).length;
        var numerodiv = lgtblproduits-1
        document.getElementsByName(nom)[numerodiv].appendChild(nomproduit);
//création du boutton supprimer du produit (meme methode que 
//pr la creation du div
        var buttonsupp = document.createElement("input");
        var typesupp = document.createAttribute("type");
        var valuesupp = document.createAttribute("value");
        var actionsupp = document.createAttribute("onclick");
        typesupp.nodeValue = "button";
        valuesupp.nodeValue = "Supprimer";
        actionsupp.nodeValue = "supprimer(\""+nom+"\", \""+numerodiv+"\")";
        buttonsupp.setAttributeNode(typesupp);
        buttonsupp.setAttributeNode(valuesupp);
        buttonsupp.setAttributeNode(actionsupp);
        document.getElementsByName(nom)[numerodiv].appendChild(buttonsupp);
      }
 
      function supprimer(nom, valeur){
        var asupp = document.getElementsByName(nom)[valeur];
        asupp.removeChild(asupp.firstChild);
        asupp.removeChild(asupp.firstChild);
      }
    </script>
  </head>
  <body>
    <div id="liste">
      <ul>
        <li><a href="#" onclick="ajouter('produit1')">produit1</a></li>
        <li><a href="#" onclick="ajouter('produit2')">produit2</a></li>
      </ul>
    </div>
    <div id="panier"></div>
  </body>
</html>

Merci pour ces infos, je me jette sur le code de ce pas.

Prochaine étape sera donc les cookies :roll:

aller, au boulot :yaisse2: