Stampare il totale costo in base alla quantità prodotto

Dovrei fare in modo che che quando si modifica il numero di prodotto si stampa automaticamente il prezzo, così cpm'è non stampa il prezzo finale.

Codice PHP:

---

$(document).ready(function() {
$("div.descrizioneBig8 img").click(function() {
var div = $("<div>");
div.append("<span class='nomeLibro'>Libro8</span><span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-8</span>");
div.append("<p><span class='moneyCarrello'>Euro 20.00</span>&nbsp;&nbsp;Q.tà:&nbsp;<input type='number' name='quantity' min='1' value='1' style='width: 35px;'>&nbsp;&nbsp;= <span class='money'>Euro</span><input type='submit' name='puls' value='Elimina' style='cursor:pointer;'></p>");
div.append("<div style='background-color:#ccc; height:1px; width:100%; margin: 0 auto; margin-bottom:15px;'></div>");
$("div.carrello").append(div);
});
});


---

Se clicco su questo pulsante sotto stampa il contenuto del codice precedente

Codice PHP:

---


<div class="libri8"><img style="width:180px; height:254px;" src="immagini/libro8x.jpg" alt="libro8" title="Arn"></div><div class="descrizioneBig8"><div class="descrizione">76756756755656 ghffhg hgfh fhgfhg fhgf hgfhgf hfg</div>
<img style="width:140px; height:28px; cursor:pointer;" src="immagini/button.png" alt="Carrello" title="Aggiungi al carrello">
<div class="prezzo">Euro 20,00 | pag. 178 | ISBN 978-88-89292-55-8</div></div>


---

Lo stampa qui:

Codice PHP:

---

<div class="carrello"></div>


---

Libro8 | ISBN 978-88-89292-55-8
Euro 20.00 Q.tà:….. = Euro……………... Elimina

...guardando il codice mi pare di capire che quando clicchi su l'immagine del prodotto
mostri i dettagli e un campo input per definirne la quantita'
quindi c'e' un secondo campo input con azione pulsante SUBMIT

ma non vedo la funzione per la gestione della quantita' e del calcolo del prezzo ....

dovrebbe esserci una funzione JS che controlla il variare del campo input della quantita'
e che quindi ricalcoli il totale in base al valore unitario (il quale dovrebbe , per comodita' , essere contenuto in un campo input disabilitato)

Citazione:

---

Originalmente inviato da NLSweb

...guardando il codice mi pare di capire che quando clicchi su l'immagine del prodotto
mostri i dettagli e un campo input per definirne la quantita'
quindi c'e' un secondo campo input con azione pulsante SUBMIT

ma non vedo la funzione per la gestione della quantita' e del calcolo del prezzo ....

dovrebbe esserci una funzione JS che controlla il variare del campo input della quantita'
e che quindi ricalcoli il totale in base al valore unitario (il quale dovrebbe , per comodita' , essere contenuto in un campo input disabilitato)

---

E' proprio la funzione che gestisce la quantità-prezzo che mi manca.

Ah...ok .. hai bisogno di aiuto per crearla...

visto che usi jQuery come prima cosa devi usare la funzione CHANGE per controllare la variazione del campo input della quantita'
dai un id al campo in modo da identificarlo , quindi ne leggi il valore VAL , e lo moltiplichi per il prezzo unitario
io ti consiglio di avere un campo input con il prezzo unitario , lo disabiliti per evitare che possa essere modificato e lo identifichi con un ID
quindi stampa a video il risultato (mi sembra di capire che sia nel DIV "carrello")

Codice:

---

$("#CampoInput").change(function(){
 var quantita = $(this).val();
 var prezzounitario = $("#PrezzoUnitario").val();
 var totale = quantita * prezzounitario;
 $(".carello").html(totale);
});

---

ma se hai piu' prodotti da sommare nel carrello allora prima leggi il valore del carello e poi si aggiungi il prezzo calcolato
io ti suggerisco che anche il CARELLO sia un campo input disabilitato.

Non so cosa intendi per imput disabilitato, per darti un'idea clicca sui prodotti e appaiono nel carrello www.libridelbenessere.altervista.org

ok.....allora..

quando premi il pulsante x aggiungere al carello come determini quale prodotto hai scelto di conseguenza il suo prezzo e dove ne definisci la quantita' ?!

tutto questo mi sembra essere assente dall'esempio che mi hai postato..

se mi dai qualche minuto ti creo un piccola pagina di esempio

Ora come puoi vedere inizia a funzionare, ora si tratta di fare il calcolo automatico quantità-prezzo, il totale e Elimina

ESEMPIO

non ho implementato ELIMINA ... bisogna cambiare un po' la funzione

Citazione:

---

Originalmente inviato da NLSweb

ESEMPIO

non ho implementato ELIMINA ... bisogna cambiare un po' la funzione

---

Sto vedendo l'esempio, non potresti calcolare anche il subtotale di ogni libro e mettere elimina?

Adesso ho sistemato la funzione in modo piu' "elegante" e con aggiornamento del carello se si aggiunge o elimina un prodotto

se vuoi posso anche inserire il calcolo del sub totale..


ESEMPIO con sub totale

Citazione:

---

Originalmente inviato da NLSweb

Adesso ho sistemato la funzione in modo piu' "elegante" e con aggiornamento del carello se si aggiunge o elimina un prodotto

se vuoi posso anche inserire il calcolo del sub totale..


ESEMPIO con sub totale

---

Funziona, io ora devo sostituire questi echo con i tuoi, che sono poi quelli che vedi a video nel sito.

Codice PHP:

---


$(document).ready(function() {
$("div.descrizioneBig7 img").click(function() {
var div = $("<div>");
div.append("<span class='nomeLibro'>Perché digiunare</span><span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-7</span>");
div.append("<p><span class='moneyCarrello'>€ 13.00</span>&nbsp;&nbsp;Q.tà:&nbsp;<input type='number' id='subTot' name='quantita' min='1' value='1' style='width: 35px;'>&nbsp;&nbsp;= <span class='money'>€ 13.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='submit' name='puls' value='Elimina' style='cursor:pointer;'></p>");
div.append("<div style='background-color:#ccc; height:1px; width:100%; margin: 0 auto; margin-bottom:15px;'></div>");
$("div.carrello").append(div);
});
});

$(document).ready(function() {
$("div.descrizioneBig8 img").click(function() {
var div = $("<div>");
div.append("<span class='nomeLibro'>La dieta senza muco</span><span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-8</span>");
div.append("<p><span class='moneyCarrello'>€ 20.00</span>&nbsp;&nbsp;Q.tà:&nbsp;<input type='number' id='subTot' name='quantita' min='1' value='1' style='width: 35px;'>&nbsp;&nbsp;= <span class='money'>€ 20.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp<input type='submit' name='puls' value='Elimina' style='cursor:pointer;'></p>");
div.append("<div style='background-color:#ccc; height:1px; width:100%; margin: 0 auto; margin-bottom:15px;'></div>");
$("div.carrello").append(div);
});
});


---

Si.. io ora devo andare .. se hai ancora problemi fammi sapere..buona notte.

Citazione:

---

Originalmente inviato da NLSweb

Si.. io ora devo andare .. se hai ancora problemi fammi sapere..buona notte.

---

Come puoi vedere ho fatto un po' di lavoro stanotte. Ora si tratta di farli apparire quando clicco su Aggiungi al carrello, e attivare Elimina.

Codice PHP:

---

<script>
$(document).ready(function(){
function CALCOLA(id){
var moneyCarrello1 = $("#prodotto"+id+" .moneyCarrello1").val();
var quantity = $("#prodotto"+id+" .quantity").val();
var costo = quantity * moneyCarrello1;
$("#prodotto"+id+" .subTotale").val(costo.toFixed(2)); //Mette i decimali
return parseInt(costo);
}

function CARELLO(){
var numeroMERCI = 8; //Quantità dei libri in vendita
var totale = 0;
for(i=1;i<=numeroMERCI;i++){
totale += CALCOLA(i);
}
$("#carrello .totale").val(totale.toFixed(2)); //Mette i decimali
}

$("input").change(function(){
CARELLO();

});
});
</script>


---

Codice PHP:

---

<div class="carrello">
<div style="width: auto; height: auto; font-size: 2em; color: #008000; text-align: center;">Il tuo Carrello<br><p>è vuoto</p></div>
<br>
<div id="prodotto1">
<p class='nomeLibro'>Libro1<span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-1</span>
<br>
<br>
<span class="moneyCarrello">€ </span><input class="moneyCarrello1" type="text" name="moneyCarrello1" value="18.00">
&nbsp;&nbsp;Q.tà:&nbsp;<input class="quantity" type='number' name='quantity' min='1' value='1'>
&nbsp;&nbsp;= <span class="subTotale">€ </span><input class="subTotale" type="text" name="subTotale" min="0" value="0"><input type='submit' name='puls' value='Elimina' style='cursor:pointer;'>
</p>
</div>

<div id="prodotto2">
<p class='nomeLibro'>Libro2<span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-2</span>
<br>
<br>
<span class="moneyCarrello">€ </span><input class="moneyCarrello1" type="text" name="moneyCarrello1" value="15.00">
&nbsp;&nbsp;Q.tà:&nbsp;<input class="quantity" type='number' name='quantity' min='1' value='1'>
&nbsp;&nbsp;= <span class="subTotale">€ </span><input class="subTotale" type="text" name="subTotale" min="0" value="0"><input type='submit' name='puls' value='Elimina' style='cursor:pointer;'>
</p>
</div>


---

Pulsante

<img style="width:140px; height:28px; cursor:pointer;" src="immagini/button.png" alt="Carrello" title="Aggiungi al carrello">

La funzione che di ho scritto lavoro appena un campo input viene modificato , quindi ti consiglio di disattivare (come nel mio esempio) i campi input del subtotale e del prezzo unitario.

se vuoi associare la funzione al pulsante AGGIUNGI AL CARELLO ti basta inserire un ONCLICK che chiama la funzione CARRELLO()

per elimina invece , devi creare una funzione che azzera la quantita' e lancia la funzione CARELLO()

esempio:

Codice:

---

function elimina(id){
 var elemento = "#prodotto"+id;
 $(elemento+" .quantity").val("0");
 CARELLO();
}

---

C'è qualcosa che non mi quadra, inanzitutto quando apro la pagina, il carello deve essere vuoto, invece è già pieno

pieno ??

la funzione carello viene eseguita solo alla modifica del campo input e se la chiami tu direttamente !
e poi non fa altro che contare.. quantita' * prezzo

quindi controlla bene come hai inserito lo script

p.s.
ho visto adesso che hai messo come valore minimo del campo quantita' 1 invece di 0 !!!

Codice:

---

<input class="quantity" type='number' name='quantity' min='1' value='1'>

---

cambia cosi

Codice:

---

<input class="quantity" type='number' name='quantity' min='0' value='0'>

---

Ci stiamo fraintendendo, forse: io intendo che quando apro la home, il carrello dev'essere vuoto, si deve riempire quando clicco su Aggiungi al carrello. Poi quando si aggiunge, deve apparire già la quantità a 1 e il subtotale + il totale

ho capito...

ma prima di tutto i tuoi campi input della quantita' non devono avere gia' una valore ma devo essere impostati a zero
solo quando aggiungi al carrello la quantita' di un prodotto aumenta (e viceversa quando premi su elimina si cancella)

poi un altra cosa , visto che non inserisci direttamente la quantita' nel campo input ma vuoi usare il pulsante "aggiungi al carrelo" per farlo , fa funzione on change input non ti serve .. ti basta associare al pulsante la funzione CARRELLO()

...

un altra cosa .. la funzione onclick assegnata al pulsante deve passare come argomento funzione ID della merce
quindi devi modificare la funzione CARRELLO facendo un incremento del campo quantita


ho modificato lo script con pulsante aggiungi al carrello ed elimina ed ho levato la funzione chage input
Ecco un esempio funzionante

La prima cosa che bisognerebbe fare, secondo me, è vuotare il carello sin dall'inizio, è sempre pieno

nel mio esempio il carrello non e' pieno !! ... quindi devi capire come mai il tuo lo sia...
se vuoi che dia un occhita al codice ..posta!

Io per carrello vuoto, intendo che appare solo la scritta Il tuo carrello è vuoto, senza niente sotto.

Questo è il codice, con 2 prodotti

Codice PHP:

---

<div id="prodotto7">
<p class='nomeLibro'>Libro7<span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-7</span>
<br>
<br>
<span class="moneyCarrello">&#8364; </span><input class="moneyCarrello1" type="text" name="moneyCarrello1" value="13.00">
<span class="iquant">Q.tà:</span> <input class="quantity" type='number' name='quantity' min='0' value='0'>
&nbsp;&nbsp;= <span class="subTotale">&#8364; </span><input class="subTotale" type="text" name="subTotale" value="0"><input type='submit' name='puls' value='Elimina' style='cursor:pointer;'>
</p>
</div>

<div id="prodotto8">
<p class='nomeLibro'>Libro8<span class='isbn'>&nbsp;&nbsp;|&nbsp;&nbsp;ISBN 978-88-89292-55-8</span>
<br>
<br>
<span class="moneyCarrello">&#8364; </span><input class="moneyCarrello1" type="text" name="moneyCarrello1" value="20.12">
<span class="quant">Q.tà:</span> <input class="quantity" type='number' name='quantity' min='0' value='0'>
&nbsp;&nbsp;= <span class="subTotale">&#8364; </span><input class="subTotale" type="text" name="subTotale" value="0"><input type='submit' name='puls' onclick="elimina()" value='Elimina' style='cursor:pointer;''>
</p>
</div>

<div id="carrello">
<span style="font-size: 1.1em;">TOTALE:</span><span class="totale"> &#8364;</span> <input class="totale" type="text" name="totale">
</div>

&#8230;


<img style="width:140px; height:28px; cursor:pointer;" src="immagini/button.png" alt="Carrello" title="Aggiungi al carrello">


---

dammi un po' di tempo e ti visualizzo un esempio con le tue caratteristiche...


ecco un esempio con la scritta "carrello vuoto" / "carrello pieno" + TOTALE

LINK



dimmi se hai bisogno di altro...ma ancora non capisco alcune cose dal codice che mi hai postato...
il div del prodotto non ha il pulsante per aggiungerlo al carrello (c'e' il pulsante elimina ma non aggiungi)
la funzione elimina non ha argomenti funzione..
l'immagine a pie' di codice non ha nessuna azione associata..

Ti spiego: il cliente entra nel sito e ovviamente il carrello è vuoto (vedi anche Carrello in alto a sinistra. c'è zero), poi lui clicca sul libro che vuole comprare, in quel momento la scritta "Il tuo carrello è vuoto" si trasforma in "Il tuo carrello" e in alto a sinistra nel Carrello appare il numero 1.

Tutto qui, poi lui se vuole lo elimina e si aggiorna tutto. Poi magari metteremo lo sconto (vedi scritte in rosso sotto l'immagine grande)

Qui c'è la parte nella home con il button Aggiungi al carrello

Codice PHP:

---


<div style="width: auto; height: auto; font-size: 1.8em; text-shadow: 1px 1px #fff; color: #a70101; text-align: center; padding-top: 50px; margin-top: 920px; border: 0px solid red;">Libri di altri autori</div>
<br>
<div class="libri7"><img style="width:180px; height:254px;" src="immagini/libro7x.jpg" alt="libro7" title="Arn"></div><div class="descrizioneBig7"><div class="descrizione">76756756755656 ghffhg hgfh fhgfhg fhgf hgfhgf hfg</div>
<button type="submit" name="aggiungi" value="aggiungi" style="cursor:pointer;">Aggiungi al carrello</button>
<div class="prezzo">&#8364; 13,00 | pag. 118 | ISBN 978-88-89292-55-7</div></div>


---

www.libridelbenessere.altervista.org

Ecco un esempio aggiornato in base allo schema che visualizzo dalla tua pagina


LINK

Citazione:

---

Originalmente inviato da NLSweb

Ecco un esempio aggiornato in base allo schema che visualizzo dalla tua pagina


LINK

---

Ora va meglio, questa parte però deve comparire quando si clicca Aggiungi al carrello, e sparire quando elimino

PRODOTTO X
Prezzo: Quantita: Costo Elimina
PRODOTTO Y
Prezzo: Quantita: Costo Elimina

non e' un problema basta che raggruppi quella parte in un div che all'inizio rendi invisibile e che quando esegui "aggiungi al carrello" rendi visibile

ESEMPIO

una cosa pero'.......dici che quando premi elimina sparisce....ma elimina e' su ogni singola voce ed e' riferito alla quantita' di quel prodotto ; quindi perche' dovresti far scomparire tutto ?

a meno che metti un solo elimina per tutto il carrello .....

Citazione:

---

Originalmente inviato da NLSweb

non e' un problema basta che raggruppi quella parte in un div che all'inizio rendi invisibile e che quando esegui "aggiungi al carrello" rendi visibile

ESEMPIO

una cosa pero'.......dici che quando premi elimina sparisce....ma elimina e' su ogni singola voce ed e' riferito alla quantita' di quel prodotto ; quindi perche' dovresti far scomparire tutto ?

a meno che metti un solo elimina per tutto il carrello .....

---

Sei un mostro! Basandomi su carrelli che vedo in giro, mi sembra più intuitivo che quando il cliente elimina un prodotto, vuol dire che non gli interessa, perciò deve sparire tutto dal carrello.
Ci sarebbe bisogno anche di bloccare il pulsante Aggiungi al carrello dopo il primo click e farlo riattivare in caso l'utente elimina il prodotto dal carrello.

Un pulsante anche per vuotare completamente il carrello.

ecco tutto aggiornato...

LINK

... miglioramento: quando si ha un solo prodotto nel carrello e si premi elimina e' equivalente a Svuota Carrello e ripristina tutto come all'inizio

ESEMPIO

Ci siamo quasi, sto cercando di adattarlo, però vedo che quando si clicca su un prodotto, nel carrello ne appaiono 2, dovrebbe apparire solo quello che è stato cliccato

penso di aver capito cosa intendi....

ecco un esempio