Discussion :

[flexi2202]

bonjour a tous
apr�s plusieurs essais je me rends compte que la mise dans le panier avec ajouter
n'est pas tr�s clair pour l utilisateur et qu il doit ex�cuter deux op�rations pour mettre un article dans le panier
d'abord choisir la quantit� puis appuyer sur ajouter au panier

j'aurais souhaiter que la mise au panier se r�alise juste au moment du choix du select

qui pour m'aider svp merci

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
	            <select class="form-select" aria-label="2001" onchange="changeQte(this);" style="padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem; ">
	              <option selected value="1">1 sachet</option>
	              <option value="2">2 sachets</option>
	              <option value="3">3 sachets</option>
	              <option value="4">4 sachets</option>
	              <option value="5">5 sachets</option>
	              <option value="6">6 sachets</option>
	              <option value="7">7 sachets</option>
	              <option value="8">8 sachets</option>
	              <option value="9">9 sachets</option>
	              <option value="10">10 sachets </option>
	              <option value="11">11 sachets</option>
	              <option value="12">12 sachets</option>
	              <option value="13">13 sachets</option>
	              <option value="14">14 sachets</option>
	              <option value="15">15 sachets</option>
	              <option value="16">16 sachets</option>
	              <option value="17">17 sachets</option>
	              <option value="18">18 sachets</option>
	              <option value="19">19 sachets</option>
	              <option value="20">20 sachets</option>
	            </select>
				<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
	              <label class="form-check-label" for="case_01"> remise de 50% </label>
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          <a style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001" class="btn btn-primary ajouter-panier" onclick="ouvreMaJolieAlert(event);">ajouter au panier</a>
	        </div>
	      </div>

[flexi2202]

je viens de faire encore un essai de cette mani�re
mais cela ne fonctionne pas trop bien
apparemment je ne peux pas mettre onclick et onchange sur la m�me ligne ...

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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
  <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
	            <select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001"  onclick="ouvreMaJolieAlert(event);"style="padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem; ">
	              <option selected value="1">1 sachet</option>
	              <option value="2">2 sachets</option>
	              <option value="3">3 sachets</option>
	              <option value="4">4 sachets</option>
	              <option value="5">5 sachets</option>
	              <option value="6">6 sachets</option>
	              <option value="7">7 sachets</option>
	              <option value="8">8 sachets</option>
	              <option value="9">9 sachets</option>
	              <option value="10">10 sachets </option>
	              <option value="11">11 sachets</option>
	              <option value="12">12 sachets</option>
	              <option value="13">13 sachets</option>
	              <option value="14">14 sachets</option>
	              <option value="15">15 sachets</option>
	              <option value="16">16 sachets</option>
	              <option value="17">17 sachets</option>
	              <option value="18">18 sachets</option>
	              <option value="19">19 sachets</option>
	              <option value="20">20 sachets</option>
	            </select>
				<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
	              <label class="form-check-label" for="case_01"> remise de 50% </label>
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
 
	        </div>
	      </div>

voici l'int�rieur de mon bouton onclick

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      <script type="text/javascript">
    function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}
 
function ouvreMaJolieAlert(event) {
  let m;
  m = "L'article \"";
  m += event.target.getAttribute("data-nom");
  m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}
             </script>