Visualizzazione risultati 1 fino 8 di 8

Discussione: prezzo autoaggiornante

  1. #1
    Data registrazione
    14-02-2020
    Messaggi
    27

    Exclamation prezzo autoaggiornante

    Buongiorno a tutti!

    Sono qui per chiedervi un aiuto con un codice che non ho la più pallida idea di come sviluppare...
    premetto che sono neofita di JS quindi mi mancano sicuramente molte basi quindi siate pazienti :P

    Vi spiego la mia idea

    Io ho un form con vari cursori modificabili dall'utente...
    ed alla fine del form un prezzo...
    ho la necessità di calcolare il prezzo a seconda dei valori selezionati

    qui il link per capire meglio cosa intendo
    http://lionhosting.altervista.org/ga...onalizzato.php

    il 10€ adesso è scritto "manualmente" ma io ho la necessità di attribuire ad ogni valore degli slider un prezzo e man mano che questi vengono modificati, sommare i vari prezzi e stampare a video il prezzo finito

    quindi i calcoli che dovranno esserci dovranno essere:
    valore selezionato (select ram) X costo RAM = totale ram
    valore selezionato (select slots) X costo 1 slot = totale slot
    se email-personalizzata è checked = costo email-personalizzata
    se email-personalizzata non è checked = 0

    se configurazione-assistita è checked = costo configurazione-assistita
    se configurazione-assistita non è checked = 0

    alla fine la somma di tutti i totali


    Di seguito vi posto il mio codice

    Dentro HEAD
    Codice HTML:
                <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
                <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
                <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
                <link rel="stylesheet" href="jqueryui/style.css">
    
                <script>
                $(function() {
                    var select = $( "#ram" );
                    var slider = $( "<div id='slider-ram'></div>" ).insertAfter( select ).slider({
                    min: 1,
                    max: 6,
                    range: "min",
                    value: select[ 0 ].selectedIndex + 1,
                    slide: function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                    }
                    });
                    $( "#ram" ).change(function() {
                    slider.slider( "value", this.selectedIndex + 1 );
                    });
                });
                </script>
    
                <script>
                $(function() {
                    var select = $( "#slots" );
                    var slider = $( "<div id='slider-slots'></div>" ).insertAfter( select ).slider({
                    min: 1,
                    max: 6,
                    range: "min",
                    value: select[ 0 ].selectedIndex + 1,
                    slide: function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                    }
                    });
                    $( "#slots" ).change(function() {
                    slider.slider( "value", this.selectedIndex + 1 );
                    });
                });
                </script>
    in pagina:
    Codice HTML:
                            <div class="col-lg-4 col-md-6 col-sm-6">
                                <div class="services-wrapper mb-50">
                                    <div class="single-services">
                                        <div class="services-icon">
                                            <font color="#50c878"><span class="fad fa-paw-claws"></span></font>
                                        </div>
                                        <form id="reservation" str>
                                            <div class="services-cap">
                                                <h3><?php echo "Server Custom" ?></h3>
                                                <p>
                                                <label for="ram">RAM:</label>
                                                    <select name="ram" id="ram" style="background-color:transparent; border:0px;">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                        <option>6</option>
                                                    </select>
                                                <br>
                                                <label for="slots">SLOTS:</label>
                                                    <select name="slots" id="slots" style="background-color:transparent; border:0px;">
                                                        <option>12</option>
                                                        <option>22</option>
                                                        <option>32</option>
                                                        <option>42</option>
                                                        <option>52</option>
                                                        <option>62</option>
                                                    </select>
                                                    
                                                <br>
                                                <div class="switch-wrap d-flex justify-content-between" style="margin-top:-15%">
                                                    <label for="inserimento-plugin">Inserimento plugin:</label>
                                                    <div name="inserimento-plugin" id="inserimento-plugin" class="confirm-switch">
                                                        <input type="checkbox" id="confirm-switch-plugin" checked="" name="inserimento-plugin">
                                                        <label for="confirm-switch-plugin"></label>
                                                    </div>
                                                </div>   
    
                                                <br>
                                                <div class="switch-wrap d-flex justify-content-between" style="margin-top:-15%">
                                                    <label for="email-personalizzata">Email personalizzata:</label>
                                                    <div name="email-personalizzata" id="email-personalizzata" class="confirm-switch">
                                                        <input type="checkbox" id="confirm-switch-mail" checked="" name="email-personalizzata">
                                                        <label for="confirm-switch-mail"></label>
                                                    </div>
                                                </div>    
                                                
                                                <br>
                                                <div class="switch-wrap d-flex justify-content-between" style="margin-top:-15%">
                                                    <label for="configurazione-assistita">Configurazione assistita:</label>
                                                    <div name="configurazione-assistita" id="configurazione-assistita" class="confirm-switch">
                                                        <input type="checkbox" id="confirm-switch-configurazione" name="configurazione-assistita">
                                                        <label for="confirm-switch-configurazione"></label>
                                                    </div>
                                                </div>   
                                                                            
                                                    
                                                </p>
    
                                            
                                                
    
                                                
    
                                                    <!--<textarea name="id_telegram_utente_filtrato" readonly="readonly" id="id_telegram_utente_filtrato" style="display: none"><?php echo $id_telegram_utente_selezioanto ?></textarea> -->
                                                    <input name="id_server" id="id_server" readonly="readonly" value="<?php echo $id ?>" style="display: none">
                                                    <input name="game_server" id="game_server" readonly="readonly" value="minecraft" style="display: none">
                                                
    
                                                    <button type="submit" class="genric-btn primary circle" style="border-radius: 50px"><i class="fad fa-cart-plus"></i>&nbsp;Richiedi</button>
    
                                               
    
    
    
                                            </div>
                                        </form>
                                    </div>
                                    <div class="services-shape">
                                        <span style="margin-right:8%; margin-bottom:8%">10,00&euro;</span>
                                        <img src="assets/img/gallery/shape-services-wooden.png" alt="">
                                    </div>
                                </div>
                            </div>
    ringrazio in anticipo tutti quelli che mi aiuteranno
    Ultima modifica di contabilitavergotti : 26-04-2020 alle ore 15.01.35

  2. #2
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,834

    Predefinito

    A parte tradurre le tue indicazioni in JavaScript non c'è niente da fare (supponendo di avere i prezzi nelle apposite variabili):
    Codice:
    var ram_quantity = $('#ram').val();
    var slot_quantity = $('#slots').val();
    var has_custom_email = $('#confirm-switch-email').prop('checked') ? 1 : 0;
    var has_assisted_configuration = $('#confirm-switch-configurazione').prop('checked') ? 1 : 0;
    
    var price = ram_quantity * ram_price
              + slot_quantity * slot_price
              + has_custom_email * custom_mail_price,
              + has_assisted_configuration * assisted_configuration_price;
    Con l'unico accorgimento che email personalizzata e configurazione assistita vengono rese come variabili numeriche con 0 e 1 come possibili valori, in questo modo il prezzo finale diventa semplicemente il prodotto scalare tra quantità e prezzi.

    Per aggiornare il prezzo in tempo reale puoi associare un event listener a tutti i campi di input che lo ricalcoli e lo mostri.

    I suggerimenti che do più spesso:


  3. #3
    Data registrazione
    14-02-2020
    Messaggi
    27

    Predefinito

    Citazione Originalmente inviato da mzanella Visualizza messaggio
    A parte tradurre le tue indicazioni in JavaScript non c'è niente da fare (supponendo di avere i prezzi nelle apposite variabili):
    Codice:
    var ram_quantity = $('#ram').val();
    var slot_quantity = $('#slots').val();
    var has_custom_email = $('#confirm-switch-email').prop('checked') ? 1 : 0;
    var has_assisted_configuration = $('#confirm-switch-configurazione').prop('checked') ? 1 : 0;
    
    var price = ram_quantity * ram_price
              + slot_quantity * slot_price
              + has_custom_email * custom_mail_price,
              + has_assisted_configuration * assisted_configuration_price;
    Con l'unico accorgimento che email personalizzata e configurazione assistita vengono rese come variabili numeriche con 0 e 1 come possibili valori, in questo modo il prezzo finale diventa semplicemente il prodotto scalare tra quantità e prezzi.

    Per aggiornare il prezzo in tempo reale puoi associare un event listener a tutti i campi di input che lo ricalcoli e lo mostri.
    quindi:

    ho creato un nuovo <script>
    con il seguente codice:
    Codice HTML:
                <script>
    
                var ram_price = "2";
                var slot_price = "3";
                var custom_mail_price = "4";
                var assisted_configuration_price = "5";
    
                var ram_quantity = $('#ram').val();
                var slot_quantity = $('#slots').val();
                var has_custom_email = $('#confirm-switch-email').prop('checked') ? 1 : 0;
                var has_assisted_configuration = $('#confirm-switch-configurazione').prop('checked') ? 1 : 0;
    
                var price = ram_quantity * ram_price
                        + slot_quantity * slot_price
                        + has_custom_email * custom_mail_price,
                        + has_assisted_configuration * assisted_configuration_price;
    
                </script>
    nel body ho inserito:
    Codice HTML:
                                    <script language="JavaScript">
                                        document.write(price);
                                    </script>
    mi riesci a fare un esempio di codice con l'EventListener che dicevi? grazie

  4. #4
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,834

    Predefinito

    Puoi aggiungere una classe, per esempio update-price, ai ciascuno dei controlli del form e utilizzarla per agganciare l'event listener. Inoltre avrai bisogno di identificare lo span in cui scrivere il prezzo, dovresti dargli quindi un id come price-container.
    Fatto questo, puoi creare l'event listener e associarlo ai controlli, facendo in modo che legga le quantità, calcoli il prezzo e scriva nel contenitore del prezzo:
    Codice:
    $('.update-price').change(function (e) {
        var ram_price = 2;
        var slot_price = 3;
        var custom_mail_price = 4;
        var assisted_configuration_price = 5;
    
        var ram_quantity = $('#ram').val();
        var slot_quantity = $('#slots').val();
        var has_custom_email = $('#confirm-switch-email').prop('checked') ? 1 : 0;
        var has_assisted_configuration = $('#confirm-switch-configurazione').prop('checked') ? 1 : 0;
    
        var price = ram_quantity * ram_price
                  + slot_quantity * slot_price
                  + has_custom_email * custom_mail_price,
                  + has_assisted_configuration * assisted_configuration_price;
    
        $('#price-container').html(price + "&euro;");
    });

    I suggerimenti che do più spesso:


  5. #5
    Data registrazione
    14-02-2020
    Messaggi
    27

    Predefinito

    ok, però facendo così quadno faccio un

    <script language="JavaScript">
    document.write(price);
    </script>

    non mi stampa nulla

  6. #6
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,834

    Predefinito

    Infatti non devi farlo.

  7. #7
    Data registrazione
    14-02-2020
    Messaggi
    27

    Predefinito

    ok allora non ho capito come far stampare il testo del prezzo

    la classe "update-price" òa devo aggiungere ai vari span?
    Ultima modifica di contabilitavergotti : 26-04-2020 alle ore 17.40.16

  8. #8
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,834

    Predefinito

    È tutto indicato in un messaggio precedente:
    Puoi aggiungere una classe, per esempio update-price, a ciascuno dei controlli del form e utilizzarla per agganciare l'event listener. Inoltre avrai bisogno di identificare lo span in cui scrivere il prezzo, dovresti dargli quindi un id come price-container.
    Fatto questo, puoi creare l'event listener e associarlo ai controlli, facendo in modo che legga le quantità, calcoli il prezzo e scriva nel contenitore del prezzo:
    La classe va aggiunta ai controlli del form, ovvero select e checkbox, non agli span.

    Il testo viene ricalcolato e mostrato automaticamente ogni volta che un utente modifica una quantità, quindi è impossibile utilizzare document.write: non saprebbe dove scrivere, e in ogni caso verrebbe scritto un nuovo prezzo ogni volta che viene modificata la configurazione.

    La scrittura deve avvenire piuttosto andando ad aggiornare il valore in un contenitore preesistente, ovvero lo span che già hai, nel quale hai inserito il prezzo fisso 10.00 €. Per poterlo referenziare hai bisogno di assegnare un id a questo contenitore, per esempio price-container.

    I suggerimenti che do più spesso:


Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •