Guide e tutorial pratici per joomla e le sue estensioni
Guide e tutorial pratici per joomla e le sue estensioni

Form per richiesta preventivo

Nell'ultimo periodo mi sono arrivate diverse richieste di di esempi di form in grado di effettuare preventivi o calcoli. Nel seguente form per richiesta preventivo, costruito sulla base di un indicazione per calcolare l'importo/servizi di una camera di albergo in base ai servizi scelti, abbiamo la possibilità di moltiplicare un prezzo per una quantità, avendo in tempo reale un risultato parziale ed uno totale.

Vediamo la logica del form per preventivare il prezzo di una camera

I servizi inseriti sono 3, ma sarà possibile aggiungerne quanti ne vogliamo. Il prezzo unitario del servizio è  impostato in sola lettuta ed è impostabile dall'amministratore del form nel campo prezzo. Per la quantità ho scelto di inserire una dropdownlist con alcuni valori, ma sarebbe potuto andare bene anche un semplice campo di testo dove inserire direttamente la quantità. Il campo del subtotale è reso in sola lettura inserendo fra le opzioni del campo "readonly".

Prova il form realizzato con chronoforms V5

prezzo
quantità
sub totale
prezzo
quantità
sub totale
prezzo
quantità
sub totale

Powered by ChronoForms - ChronoEngine.com

In questo form sono presenti solo i campi necessari al calcono, quindi chi deciderà di scaricarlo lo dovrà integrare con le funzioni di invio ed eventualmente del pagamento dell'importo, funzioni presenti in altri form disponibili in questo sito e che possono essere scaricati e provati.

Creiamo il preventivatore con chronoforms V5

Il mio consiglio è quello di scaricare il form ed installarlo. Visualizzando le opzioni nel form e seguendo le istruzioni riportate di seguito potrete capire facilmente la sua "costruzione".

Procediamo con la costruzione del form inserendo i campi nella zona Design

Iniziamo con il creare i campi necessari, per ogni voce/servizio/bene/quello che volete, avremo bisogno di 3 campi che inseriremo in un multifield con un campo textbox, un campo dropdownlist e nuovamente un textbox (esattamente in questo ordine).

Ricordatevi il naming! Lasciare i nomi del field name e del field ID di serie servirà solo a confondervi, mentre utilizzerò per il nome del voce/servizio/bene/quello che volete solo il campo label (usato solo nella label del prezzo unitario), infine userò le sub label per identificarne il campo nel front-end. Per i campi non modificabili dall'utente (prezzo unitari e prezzo finale) inserirò "readonly=readonly" (senza virgolette) nel campo extra params, mentre inserirò il prezzo nel campo Field Value ricordandomi di inserire i decimali e usando il punto come separatore.

L'operazione appena fatta ripetetela per quanti voce/servizio/bene/quello che volete avrete bisogno, io nell'esempio ne ho usato 3: camera singola, camera doppia, letto supplementare.

Create infine un ulteriore campo dove verrà visualizzato il totale, ricordandovi di inserire "readonly=readonly" (senza virgolette) nel campo extra params.

Inseriamo alcuni elementi nella zona Setup

Nella zona ON LOAD inseriamo in questo ordine un elemento "Load javascript" e "HTML Render Form", quindi apriamo l'elemento "load javascript" ed incolliamo il seguente codice:

jQuery(document).ready
 (function (op)
 {
 op('#prezzosingola').on('change', operazione);
 op('#qtsingola').on('change', operazione);
 op('#prezzodoppia').on('change', operazione);
 op('#qtdoppia').on('change', operazione);
 op('#prezzolsup').on('change', operazione);
 op('#qtlsup').on('change', operazione); 
 op('#totale').on('change', operazione); 

 function operazione ()
 {
 var prezzosingola = Number (op('#prezzosingola').val());
 var qtsingola = Number (op('#qtsingola').val());
 op('#totsingola').val(( prezzosingola * qtsingola).toFixed(2));

 var prezzodoppia = Number (op('#prezzodoppia').val());
 var qtdoppia = Number (op('#qtdoppia').val());
 op('#totdoppia').val(( qtdoppia * prezzodoppia).toFixed(2));
  
 var prezzolsup = Number (op('#prezzolsup').val());
 var qtlsup = Number (op('#qtlsup').val());
 op('#totlsup').val(( qtlsup * prezzolsup).toFixed(2));
  
 var totsingola = Number (op('#totsingola').val());
 var totdoppia = Number (op('#totdoppia').val());
 var totlsup = Number (op('#totlsup').val());
 op('#totale').val(( totsingola + totdoppia + totlsup).toFixed(2));
 }
}
);

Questo codice javascript è ottimizzato per avere restituiti importi con i decimali, ma dove servissero importi senza decimali, sarà opportuno trasformare le stringhe che contengono .toFixed(2), da così

op('#totsingola').val(( prezzosingola * qtsingola).toFixed(2));

a così

op('#totsingola').val( prezzosingola * qtsingola);

La guida finisce qui, se ti è piaciuta puoi ringraziarmi cliccando su un banner e lasciando un commento qui sotto!

Commenti   

+1 # Giuseppe 2016-06-13 19:46
Ho provato il form e funziona benissimo, complimenti.
Ma il codice conteggia in euro. Ho provato a fare delle modifiche per fare i totali in ore e minuti ma non va. Il problema sono i decimali.
Mi spiego meglio:
Sommando 1 ora e 50 minuti ed 1 ora e 15 minuti stampa un totale pari a 2 ore e 65 minuti invece che 3 ore e 5 minuti.
E' possibile apportare una modifica al codice affinché stampi un totale di 3 ore e 5 minuti, e così via?
Grazie in anticipo.
+1 # giusebos 2016-06-14 00:00
sicuramente è possibile conteggiare ore e minuti, per la questione dei decimali ne parlo nell'articolo, li avevo aggiunti proprio per lavorare con una valuta.

Per conteggiare ore e minuti così su due piedi non saprei, ma basterebbe cercare un pò di documentazione in rete per capire. Inizia col cercare "php conteggio ore e minuti"
0 # Giuseppe 2016-06-14 22:38
Avevo già fatto delle ricerche ma non ero riuscito ad adattare i codici a questo form. Riproverò, se ottengo dei risultati interessanti ti farò sapere. Grazie per la risposta.
0 # Giuseppe 2016-07-09 17:29
Salve. dopo una ulteriore ricerca ho trovato il codice php che riesce a fare la somma di ore e minuti, somma bene tutto ma solo con un problema che non riesco a risolvere e volevo chiederti un aiuto. Siccome il codice e l'adattamento per Chronoform sono lunghi vuoi che te lo invia per e-mail o posto quì il tutto?
Fammi sapere, un saluto
0 # giusebos 2016-07-10 10:46
Inizia a descrivere il problema qui, per adesso non sono in grado di leggere nessun codice in quanto oberato di lavoro.
0 # giulia 2017-05-19 09:53
Ciao, io ho installato su sito chronoform v5 ma quando cerco di caricare il pacchetto preventivatore.zip mi dà errore dicendo: "JInstaller: :Install: Non è stato possibile trovare il file di setup XML" - "Impossibile trovare pacchetto di installazione".
Come posso risolvere?

Grazie
Giulia
0 # giusebos 2017-05-19 10:19
Citazione giulia:
Ciao, io ho installato su sito chronoform v5 ma quando cerco di caricare il pacchetto preventivatore.zip mi dà errore dicendo: "JInstaller: :Install: Non è stato possibile trovare il file di setup XML" - "Impossibile trovare pacchetto di installazione".
Come posso risolvere?

Grazie
Giulia

non è una estensione di joomla e non va installata con il gestore delle estensioni! Devi fare il restore del file zip dal pannello di controllo di chronoforms.
0 # Lorenzo 2018-09-07 18:11
Ciao, ho caricato il form per vendere una maglietta disponibile in più taglie. Il totale si aggiorna alla prima selezione di una taglia con la sua quantità. Però, se la persona vuole aggiungere altre magliette con altre taglie, il totale non si aggiorna. È possibile fare in modo che il totale si aggiorni ad ogni selezione? Grazie
0 # giusebos 2018-09-07 18:41
Citazione Lorenzo:
Ciao, ho caricato il form per vendere una maglietta disponibile in più taglie...


Non ho idea di cosa e come hai fatto, ma sicuramente è possibile. Se non ricordo male in rete dovresti trovare come implementare la parte di codice per inserire più prodotti nel carrello, prova a cercare.

Per pubblicare un commento devi registrarti