Création d'une page devis - JavaScript

Question

NeSo

9 Jan 2021 à 20:35

Bonsoir,

Je chipote sur Javascript depuis quelques semaines, et j'essaye petit a petit de m'améliorer..
N'ayant pas d'énorme connaissance, il m'arrive de faire des choses probablement 1000x plus compliqué.. xD

Dans cet exemple ( que la partie t-shirt est "fonctionnel" ) , j'essaye de créer une page web permettant d'obtenir un devis.. Cependant la case "quantité" doit affecter le prix du t-shirt mais aussi du mode d'impression ( quadri ou 1 coul. ) Malheureusement pour le moment les quantités n'affectent que une reduction sur l'ensemble du prix.

Avez-vous une idée pour moi? Peut être une autre solution pour faire mon idée? Avec des conditions? Mais comment?

Je vous joins ci dessous les codes ainsi que l'exemple : http://ineart.be/devis/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>
<head>
	<title>Devis</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="all"/>

    
</head>

<body>
<div id="conteneur">
    <div id="colonne1">
	   <div id="modele">
	       <div id="modeletitre" class="btn-grad">
		      <h3>Vetement</h3>
	       </div></br>
        
        <label for="pet-select">Catégorie :</label>
            
        <select name="cat" id="cat">
            <option value="0" id="selection">Selection</option>
            <option value="test" id="tshirt">T-shirt</option>
            <option value="t" id="sweat">Sweat</option>
        </select></br></br>
    
        <select name="pet-select" id="cat-tshirt">
            <option value="0" id="selection">Selection</option>
			<option value="3.71" id="190g">B&C 190gr - CGTU03T</option>
			<option value="5.34" id="k356">T-shirt Kariban 190gr - K356</option>
		</select>

        <select name="pet-select" id="cat-sweat">T-shirt :
			<option value="190g" id="190g">BC </option>
			<option value="tshirt" id="kariban">Kariban</option>
		</select></br></br>
	   </div>
	
	<div id="modele">
		<div id="modeletitre" class="btn-grad">
			<h3>Personnalisation</h3>
		</div></br>
    
    	<label for="pet-select">Impression :</label>
			<select name="col" id="imp">
                <option value="0" id="aucune">Aucune</option>
                <option value="1.38" id="coeur">Coeur</option>
                <option value="2.91" id="dos">Dos</option>    
                <option value="4.29" id="cd">Coeur/Dos</option>
            </select> </br></br>
    
        <label for="pet-select" id="coul-nom">Couleur :</label>
            <select name="nbr-coul" id="nbr-coul">
                <option value="0" id="1coul">1 coul.</option>
			     <option value="0.30" id="quadri">Quadri</option>
            </select></br></br>

        <label for="pet-select">Quantité :</label>
			<select name="col" id="quantite">
                <option value="0" id="1">1 > 24</option>
                <option value="-0.10" id="25">25 > 49</option>
                <option value="-0.20" id="50">50 > 99</option>
                <option value="-0.25" id="99">+ 99</option>
            </select>
	<div id="modeletitre" class="btn-grad">
			<h3>Prix</h3>
		</div></br>
        <div id="result" ></div>
    </div>
    </div>
	
    <div id="centre">
        <div id="CGTU03T">
            <div id="image"><img src="img/CGTU03T.jpg" style="width: 100%; float:left; padding-top: 1%"></div>
        </div>

       <div id="k356centre">
            <div id="image"><img src="img/k356.jpg" style="width: 100%; float:left; padding-top: 1%"></div>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="custom_js2.js"></script>
</body>
</html>

$("#cat-tshirt").hide();
$("#cat-sweat").hide();
$("#coul-nom").hide();
$("#nbr-coul").hide();
$("#k356centre").hide();
$("#CGTU03T").hide();


$('#cat').change(function() {
  if ($(this)[0].selectedOptions[0].id == "tshirt") 
  { 
    $("#cat-tshirt").show();
    $("#cat-sweat").hide();
    $( "select" )
    .change(function () {
        var result = "";
        var option1 = Number( $( "#cat-tshirt" ).val() );
        var option2 = Number( $( "#imp" ).val() );
        var option3 = Number( $( "#nbr-coul" ).val() );
        var option4 = Number( $( "#quantite" ).val() );   
        result = option1 + option2 + option3 + option4;
    $( "#result" ).text( result );
  })
  .change();
  }
  

    if ($(this)[0].selectedOptions[0].id == "sweat") 
    {
        $("#cat-sweat").show();
        $("#cat-tshirt").hide();
    }
    
    if ($(this)[0].selectedOptions[0].id == "selection") 
    {
      $("#cat-sweat").hide();
      $("#cat-tshirt").hide();
    } 
});

$('#imp').change(function() {
    if ($(this)[0].selectedOptions[0].id == "coeur") 
    {
        $("#coul-nom").show();
        $("#nbr-coul").show();           
    }
    
    if ($(this)[0].selectedOptions[0].id == "dos") 
    {
      $("#coul-nom").show();
      $("#nbr-coul").show();
    }
    
    if ($(this)[0].selectedOptions[0].id == "cd") 
    {
      $("#coul-nom").show();
      $("#nbr-coul").show();
    }
});

$('#cat-tshirt').change(function() {
    if ($(this)[0].selectedOptions[0].id == "190g") 
    {
        $("#k356centre").hide();
        $("#CGTU03T").show();
    }
    
    if ($(this)[0].selectedOptions[0].id == "k356") 
    {
        $("#CGTU03T").hide();
        $("#k356centre").show();
    }  
});

Ps : Ne me tapez pas sur les doigts pour le codage exécrable Smiley rolleyes

Modifié par NeSo (09 Jan 2021 - 20:36)

Sujet clos

JavaScript, DOM et API Web HTML5

Création d'une page devis - JavaScript