prezzo autoaggiornante

26-04-2020, 13.08.12

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

**mzanella** · 26-04-2020, 14.24.07

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.

26-04-2020, 15.15.19

Originalmente inviato da mzanella

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

**mzanella** · 26-04-2020, 16.04.33

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;");
});

26-04-2020, 16.09.36

ok, però facendo così quadno faccio un

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

non mi stampa nulla

**mzanella** · 26-04-2020, 16.22.51

Infatti non devi farlo.

26-04-2020, 16.38.45

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

la classe "update-price" òa devo aggiungere ai vari span?

**mzanella** · 26-04-2020, 18.58.07

È 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.

Discussione: prezzo autoaggiornante

LinkBack

Strumenti discussione

Display

prezzo autoaggiornante

Regole di scrittura