Preventivi online con joomla: sviluppiamo invieme e creiamo un gruppo!

[monak83]

La Drop ASOLE dovrebbe calcolare i metri lineari (base o altezza o basex2 o altezzax2) moltiplicarli per un costo al metro (2,5) e aggiungere il tutto al totale.

Spero di essewre stato chiaro.

Come posso implementare questa cosa?

[vales]

Invio codice per form con nuove funzioni:

Form html:

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Base</label>
    <input class="cf_inputbox required validate-number" maxlength="10" size="10" title="inserire un numero" id="text_0" name="base" type="text" onChange="updatethis(this.form);" value=""/>
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/>[/url]
                <div class="tooltipdiv">Base :: inserire la misura della base</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Altezza</label>
    <input class="cf_inputbox required validate-number" maxlength="10" size="10" title="Inserire un numero valido" id="text_1" name="altezza" type="text" onChange="updatethis(this.form);" value=""/>
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/>[/url]
                <div class="tooltipdiv">Altezza :: Inserire la misura dell'altezza</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Area</label>
    <input class="cf_inputbox" maxlength="10" size="10" title="" id="text_2" name="area" type="text" value="0" readonly="readonly"/>
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Tipo di carta</label>
    <select class="cf_inputbox validate-selection" id="select_4" size="1" title=""  name="carta" onChange="updatethis(this.form);">
      <option value="0">Seleziona</option>
<option value="10">Lucida (10€/mq)</option>
<option value="6">Opaca (6€/mq)</option>
<option value="8">Fine (8€/mq)</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/>[/url]
                <div class="tooltipdiv">Tipo di carta :: Scegli il tipo di carta</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Vuoi le asole saldate?</label>
    <select class="cf_inputbox" id="select_6" size="1" title=""  name="asole" onChange="updatethis(this.form);">
    <option value="">Seleziona</option>
      <option value="LS">Lato superiore</option>
<option value="LI">Lato inferiore</option>
<option value="LD">Lato destro</option>
<option value="LSN">Lato sinistro</option>
<option value="LSI">Lati superiore e inferiore</option>
<option value="LDS">Lati destro e sinistro</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/>[/url]
                <div class="tooltipdiv">Vuoi le asole saldate? :: Scegli la posizione delle asole saldate</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Totale</label>
    <input class="cf_inputbox" maxlength="10" size="10" title="" id="text_5" name="totale" type="text" value="0" readonly="readonly"/>
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Aggiorna calcolo" name="button_7" type="button" />
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Invia" name="button_3" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>


Form javascripts

Codice: [Seleziona]

function updatethis(form) {

      var costo = 0;

      form.elements['area'].value = form.elements['base'].value * form.elements['altezza'].value;

if ((form.elements['asole'].value=="LD") || (form.elements['asole'].value=="LSN")) costo =(form.elements['base'].value * 2.5);
     
if ((form.elements['asole'].value=="LI") || (form.elements['asole'].value=="LS")) costo=(form.elements['altezza'].value * 2.5);
   

if (form.elements['asole'].value=="LSI") costo=(form.elements['base'].value * 2 * 2.5);
     

if (form.elements['asole'].value=="LDS") costo=(form.elements['altezza'].value * 2 * 2.5);
     
if (form.elements['asole'].value=="") costo=0;
   

form.elements['totale'].value = costo + (form.elements['area'].value * form.elements['carta'].value);

      }

[monak83]

Mi viene in mente un'altra cosa che può essere utile in questo genere di forms:

visto che l'aggiunta di asole saldate è una lavorazione accessoria, come è possibile fare in modo che la SELECT "carta" cambi i prezzi in aumento?

Esempio: SELECT "carta"
- lucida 10€
- opaca  6€
- fine   8€

Ora:

- se nella SELECT "asole" non seleziono nulla significa che non voglio la lavorazione accessoria e tutto rimane invariato, viene solo calcolato il prezzo al mq

- se seleziono un tipo di asola mi viene conteggiato il costo al metro lineare delle asole in più la SELECT "carta" cambia i prezzi così (senza criterio percentuale o altro):

- lucida €23
- opaca €12
- fine €34

è possibile?

Ho pensato di ovviare creando un'altra form, ma credo sia utile all'utente conoscere il costo di un prodotto senza dover cambiare pagina (e quindi form).

ciao
monak83

[vales]

Credo che con gli elementi già forniti in questo post e in quest'altro

http://forum.joomla.it/index.php/topic,99125.0.html

ci siano le condizioni di implementare le nuove funzionalità richieste senza particolari difficoltà.

[monak83]

Ciao vales,
 seguendo i tuoi esempi sono riuscito ad ottenere quello che chiedevo nel post precedente .

Unica cosa che non capisco è questa:

ho settato a style="display: none; le due drop di mio interesse solo che non appena inserisco un valore in un campo text la drop compare ma funziona tutto correttamente.

Come faccio a far comparire la drop solo quando scelgo quale drop visualizzare dal menu a tendina Rinforzo perimetrale ?

posto il codice per farmi capire meglio e come soluzione alla mia domanda utile a tutti i seguaci di questo 3D.

HTML

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Informazioni sul formato</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 440px;">Numero di copie (stesso soggetto)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_1" name="n_copie" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Numero di copie (stesso soggetto) :: Inserisci il numero (in cifre) di copie dello stesso sogetto</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 440px;">Base (in cm)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_2" name="base" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Base (in cm) :: Inserisci la dimensione in centimetri della BASE del tuo Banner</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 440px;">Altezza (in cm)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_3" name="altezza" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Altezza (in cm) :: Inserisci la dimensione in centimetri dell' ALTEZZA del tuo Banner</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 440px;">Superficie (in mq)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="" id="text_4" name="sup" type="text" readonly="readonly" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Superficie (in mq) :: Superficie calcolata in metri quadrati con arrotondamento al metro quadro SUPERIORE</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Rinforzo perimetrale</label>
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="rinforzo_perim" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
      <option value="no">No</option>
<option value="si">Si</option>

    </select>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Rinforzo perimetrale :: Se è selezionato aumenta il costo al mq di ogni prodotto e da la possibilità di inserire lavorazioni accessorie</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div id="variabile1" style="display: none;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 25px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title=""  name="tipo_nolavorazioni" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
<option value="7.5">Banner pvc 440gr calandrato € 7,50/mq</option>
<option value="10">Banner pvc 440gr calandrato alta qualità € 10,00/mq</option>
<option value="10.8">Banner pvc 500gr spalmato endutex classe B1 ignifugo € 10,80/mq</option>
<option value="13">Banner pvc 500gr spalmato endutex classe B1 ignifugo alta qualità € 13,00/mq</option>
<option value="0">Banner pvc 510gr spalmato bifacciale € 00/mq</option>
<option value="0">Banner pvc 680gr spalmato bifacciale € 00/mq</option>
<option value="12">Banner pvc 700gr € 12,00/mq</option>
<option value="15">Banner pvc 700gr alta qualità € 15,00/mq</option>
<option value="21">Banner backlit eurosol 550gr spalmato € 21,00/mq</option>
<option value="10">Rete mesh antivento 400gr classe B1 endutex € 10,00/mq</option>

    </select>
</div>
  <div class="cfclear">&nbsp;</div>
</div>
</div>

<div id="variabile2" style="display: none;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 25px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_6" size="1" title=""  name="tipo" onChange="updatethis(this.form);">
<option value="">Clicca per scegliere</option>
<option value="9.9">Banner pvc 440gr calandrato € 9,90/mq</option>
<option value="12.5">Banner pvc 440gr calandrato alta qualità € 12,50/mq</option>
<option value="12">Banner pvc 500gr spalmato endutex classe B1 ignifugo € 12,00/mq</option>
<option value="15">Banner pvc 500gr spalmato endutex classe B1 ignifugo alta qualità € 15,00/mq</option>
<option value="23">Banner pvc 510gr spalmato bifacciale € 23,00/mq</option>
<option value="26">Banner pvc 680gr spalmato bifacciale € 26,00/mq</option>
<option value="14">Banner pvc 700gr € 14,00/mq</option>
<option value="17">Banner pvc 700gr alta qualità € 17,00/mq</option>
<option value="23">Banner backlit eurosol 550gr spalmato € 23,00/mq</option>
<option value="13">Rete mesh antivento 400gr classe B1 endutex € 13,00/mq</option>

    </select>
</div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Lavorazioni accessorie</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 180px;">Occhiellatura</label>
    <select class="cf_inputbox validate-selection" id="select_8" size="1" title=""  name="occhiellatura" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
      <option value="1">Standard ogni 50 cm (nessu costo aggiuntivo)</option>
<option value="1.08">Occhielli ogni 30 cm (+8%)</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Occhiellatura :: Scegli il tipo di occhiellatura</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 180px;">Asole saldate</label>
    <select class="cf_inputbox validate-selection" id="select_9" size="1" title=""  name="asole" onChange="updatethis(this.form);">
    <option value="">Vuoi le asole saldate?</option>
      <option value="0">No</option>
<option value="l_sup">Lato superiore</option>
<option value="l_inf">Lato inferiore</option>
<option value="l_dx">Lato destro</option>
<option value="l_sx">Lato sinistro</option>
<option value="l_supinf">Lati superiore e inferiore</option>
<option value="l_dxsx">Lati destro e sinistro</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Asole saldate :: Seleziona le asole</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>
</div>


<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Informazioni sul file</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 195px;">Nome del file</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_10" name="nomefile" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Nome del file :: Inserisci il nome del file esatto compresa l'estensione</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 195px;">Modalità d'invio</label>
    <select class="cf_inputbox validate-selection" id="select_12" size="1" title=""  name="mod_invio">
    <option value="">Clicca per scegliere</option>
      <option value="Subito via FTP">Subito via FTP</option>
<option value="Più tardi via FTP">Più tardi via FTP</option>
<option value="Invierò a mia cura">Invierò a mia cura</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Modalità d'invio :: Scegli come inviare il tuo file tra le varie modalità</div>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Costi</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Prezzo netto</label>
    <input class="cf_inputbox" maxlength="150" size="5" title="" id="text_13" name="prezzo" type="text" readonly="readonly" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Prezzo (iva 20% inclusa)</label>
    <input class="cf_inputbox" maxlength="150" size="5" title="" id="text_14" name="prezzo_iva" type="text" readonly="readonly" />
 
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

JAVASCRIPT

Codice: [Seleziona]

function updatethis(form) {

      var costo = 0;

      if ((form.elements['asole'].value=="l_sup") || (form.elements['asole'].value=="l_inf")) costo =(form.elements['base'].value * 2.5);
     
      if ((form.elements['asole'].value=="l_dx") || (form.elements['asole'].value=="l_sx")) costo=(form.elements['altezza'].value * 2.5);
   
      if (form.elements['asole'].value=="l_supinf") costo=(form.elements['base'].value * 2 * 2.5);
     
      if (form.elements['asole'].value=="l_dxsx") costo=(form.elements['altezza'].value * 2 * 2.5);
     
      if (form.elements['asole'].value=="0") costo=0;

      form.elements['sup'].value = Math.ceil((form.elements['base'].value * form.elements['altezza'].value)/10000);

var rinforzo = form.elements['select_1'].value;

if (rinforzo=="no") {document.getElementById("variabile1").style.display = 'block';
document.getElementById("variabile2").style.display = 'none';
form.elements['prezzo'].value = form.elements['n_copie'].value * form.elements['sup'].value * form.elements['tipo_nolavorazioni'].value
}
else {document.getElementById("variabile2").style.display = 'block';
document.getElementById("variabile1").style.display = 'none';
form.elements['prezzo'].value = form.elements['n_copie'].value * form.elements['sup'].value * form.elements['tipo'].value * form.elements['occhiellatura'].value + costo/100;
}
form.elements['prezzo_iva'].value = form.elements['prezzo'].value * 1.2;
}
ciao

monak83

[monak83]

Risolto:

il problema era nell'espressione condizionale IF ELSE.
Anzichè utilizzare IF ELSE ho utilizzato 2 IF in sequenza e ora è ok!

Ciao a tutti.
monak83

[monak83]

Ora che la parte delle forms è quasi completata (manca l'interrogazione del DB come richiesto in questo http://forum.joomla.it/index.php/topic,99463.0.html topic) siamo pronti per generare un qualsiasi articolo.

Ora dovremmo riuscire a integrare queste forms con un sistema e-commerce come VirtueMart in modo tale che, una volta generato un articolo (caratteristiche, prezzo), possa essere passato al carrello di VirtueMart e quindi gestito come un normale prodotto del catalogo.

Come è possibile fare ciò?

ciao
monak83

[t3cnoSite]

Ti vedi il docie di VirtueMart e fai un po di reverse engineering; magario guardati qualche altro modulo che si integra già in VirtueMart.

[alexred]

ciao monak83,
complimenti per la tenacia e complimenti al grande vales per l'aiuto che ti sta dando.
Credi sia possibile preparare un articolo da pubblicare su Joomla.it che illustri questa tecnica per realizzare le form per il preventivo?

(senza l'integrazione eventuale con virtuemart)

[monak83]

Ciao alexred,
 grazie ma i veri complimenti vanno tutti e solo a vales, è lui il guru, io ho solo fatto da tramite e da tester.

Per quanto riguarda l'articolo non ci sono problemi; appena ho terminato tutte le prove lo scrivo e poi magari ti contatto via PM cosi mi dici come devo muovermi.

A mio avviso sarebbe una grossa mancanza redigere quest'articolo senza l'integrazione con VirtueMart!

Se non riusciamo a farla è come se avessimo perso del tempo fallendo così nel nostro intento.

A che servirebbero tutte queste forms se non fosse possibile acquistare il prodotto generato?

Quindi mettiamoci in marcia verso le ultime difficoltà!

Unitevi!!!

Ciao
monak83

[xpress2003]

Salve a tutti, grazie all'aiuto di vales che mi ha postato un link verso questa discussione, ho trovato finalmente quello che cercavo e che monak83 ha perfettamente centrato.

Mi chiedevo come mai lo sviluppo di questa discussione si è un pò fermata, e mi rivolgo sopratutto a monak83 chiedendogli a che punto è il suo sviluppo.

[xpress2003]

Volevo inoltre chiedere se potete essere più precisi sull'inizializzazione dei campi value, praticamente dovrei inserire " " in alcuni campi?

[vales]

Precisa meglio.

Se vuoi assegnare come valore uno spazio fai value=" "

[alexred]

ciao monak83,
complimenti per la tenacia e complimenti al grande vales per l'aiuto che ti sta dando.
Credi sia possibile preparare un articolo da pubblicare su Joomla.it che illustri questa tecnica per realizzare le form per il preventivo?

(senza l'integrazione eventuale con virtuemart)

ci riprovo nuovamente.
nel pieno spirito collaborativo di questo sito e di questo forum, chiedo gentilmente a monak83 se si rende disponibile a scrivere un articolo su quanto appreso per la realizzazione del preventivo online.

[Mistik]

Salve a tutti,
ho trovato interessante l'argomento proposta da Monak.... anche se, purtroppo, svanendo ha lasciato le cose in sospeso.


Mi sono da poco avvicinato a Chronoform e volevo caricare l'esempio per vederne i risultati.
Il codice HTML va caricato in HTML code, ma non capisco dove mettere il codice Javascript se non dargli un'estensione .js e caricarlo tramite css

[vales]

Benvenuto nella comunità italiana di Joomla! Mistik,

Se usi chronoform v3 lo devi mettere in in Form Javascripts senza usare i tag <script> all'inizio ed alla fine del codice.

Se usi la versione v4 devi caricare in codice nell'atcion Load JS sempre senza tag.

[Mistik]

Grazie,
utilizzo la v4 su joomla 1.5

...aggiungo anche che per caricare lo script javascript bisogna utilizzare Easy Form Wizard
altrimenti visualizzerete una pagina bianca, mentre per il codice html è necessario impostare nel menu a discesa "wizard".

[vales]

Usa il Form wizard ed il wizard edit sono più potenti.

[Mistik]

Sto provando a caricare vari esempi di in Code HTML e javascript in Events -- On Load -- Load JS
ma quando clicco su Frontend view mi appare sempre una pagina bianca
Non riesco nemmeno a visualizzare l'esempio del form a geometria variabile di Vales stesso.
Scusatemi, ma sta cosa mi innervosisce e mi scoraggia.

[vales]

Attiva gli errori in configurazione di Joomla per vedere cosa indica di preciso.