Gestire i calcoli dei pagamenti di un carrello e-commerce con jQuery richiede semplicemente l'uso delle operazioni di moltiplicazione e addizione. Occorre infatti moltiplicare il numero dei prodotti per il prezzo corrispondente e quindi operare una somma finale (a cui vanno aggiunti anche i costi di spedizione). Sostanzialmente il carrello è una tabella in cui prodotti, quantità e prezzo sono su colonne separate. Il lavoro di jQuery è quello di reperire le stringhe contenute nelle colonne di quantità e prezzo, trasformarle in numeri per effettuare i calcoli e quindi riconvertire il risultato in stringa per visualizzarlo. Vediamo insieme i dettagli.
Abbiamo il più classico dei carrelli: un form contenente una tabella. Eccone la struttura:
<form action="#" method="post" id="cart">
<table summary="Il tuo carrello">
<caption>Il tuo carrello</caption>
<tr>
<th scope="col">Prodotto</th>
<th scope="col">Quantità</th>
<th scope="col">Prezzo</th>
</tr>
<tr>
<td>Prodotto 1</td>
<td><input type="text" value="1" class="qty" disabled="disabled" />
<a href="#" class="modify">Modifica</a> <a href="#" class="add">Ricalcola</a></td>
<td>3 Euro</td>
</tr>
<tr>
<td>Prodotto 2</td>
<td><input type="text" value="2" class="qty" disabled="disabled" />
<a href="#" class="modify">Modifica</a> <a href="#" class="add">Ricalcola</a></td>
<td>5 Euro</td>
</tr>
<tr>
<td>Prodotto 3</td>
<td><input type="text" value="4" class="qty" disabled="disabled" />
<a href="#" class="modify">Modifica</a><a href="#" class="add">Ricalcola</a></td>
<td>2 Euro</td>
</tr>
</table>
<p id="total"><strong>Totale (senza spese di spedizione)</strong>:</p>
<div><input type="submit" value="Avanti" id="next" name="next" /></div>
</form>
Il prezzo ovviamente è fisso e non modificabile, mentre la quantità può essere modificata tramite gli opportuni link e quindi l'intero totale può essere a sua volta ricalcolato. Partiamo con i campi di testo disabilitati perchè il nostro carrello proviene da un link creato nella fase finale dell'acquisto. Il linguaggio lato server lo ha assemblato nella forma che vediamo. Ora tocca a jQuery operare su di esso.
Astraiamo un modello del nostro carrello e creiamo un oggetto che chiameremo Cart:
var Cart = {
};
Un oggetto di questo tipo compie delle azioni, altrimenti non ha senso. Il nostro carrello deve:
- calcolare il totale parziale del carrello (senza spese di spedizione) aggiungendolo all'elemento
total - mostrare il link "Ricalcola" quando l'utente ha cliccato su "Modifica" (e quindi nascondere "Modifica")
- ricalcolare il totale parziale dopo che l'utente ha modificato il campo di testo e cliccato su "Ricalcola"
- gestire (qui in modo fittizio) l'invio del form
Cominciamo dalla prima azione, eseguita da due metodi:
var Cart = {
qtyFields: $('input.qty', '#cart'),
activeLinks: $('a.modify', '#cart'),
addLinks: $('a.add', '#cart'),
calculate: function() {
var total = 0;
this.qtyFields.each(function() {
var field = $(this);
var amount = field.parent().next().text();
var amountR = amount.replace(/\s+/g, '').replace(/Euro/, '');
var n1 = new Number(field.val());
var n2 = new Number(amountR);
var sum = n1 * n2;
total += sum;
});
return (total.toString() + ' Euro');
},
trigger: function() {
var subtotal = Cart.calculate();
$('<span/>').text(subtotal).
appendTo('#total');
},
// continua
};
Il metodo calculate() passa in rassegna tutti i campi di testo, ne estrae il valore e lo moltiplica con il valore contenuto nella cella adiacente a quella nella quale risiede. Alla fine restituisce il totale parziale. Da notare come le operazioni matematiche siano state eseguite sia convertendo le stringhe in numeri, sia bonificando le stringhe dai valori non necessari.
trigger(), invece, si limita a memorizzare il risultato di calculate() in una variabile che sarà usata come contenuto testuale dell'elemento HTML aggiunto a total.
A questo punto dobbiamo attivare il link "Modifica" permettendo all'utente di editare il campo di testo corrispondente:
// continua
activate: function() {
this.activeLinks.each(function() {
var link = $(this);
var $input = link.prev();
var linkAdd = link.next();
link.click(function(event) {
$input.removeAttr('disabled');
linkAdd.show();
link.hide();
event.preventDefault();
});
});
},
// continua
L'azione sul link è semplice: viene rimosso l'attributo disabled dal campo di testo, viene mostrato il link "Ricalcola" e quindi lo stesso link soggetto dell'azione viene nascosto.
Non ci resta che gestire l'azione sul link "Ricalcola":
// continua
add: function() {
this.addLinks.each(function() {
var link = $(this);
var $input = link.prev().prev();
var linkActive = link.prev();
link.click(function(event) {
var total = Cart.calculate();
$('span', '#total').text(total);
$input.attr('disabled', 'disabled');
link.hide();
linkActive.show();
event.preventDefault();
});
});
},
// continua
Viene invocato di nuovo il metodo calculate() che aggiorna il totale parziale. A questo punto l'elemento HTML che conserva tale valore viene aggiornato sul nuovo valore. Quindi il campo di testo viene nuovamente disabilitato, viene mostrato nuovamente il link "Modifica" e il link soggetto dell'azione viene nascosto.
Quindi possiamo gestire in modo fittizio l'invio del form:
// continua
send: function() {
$('#cart').submit(function(event) {
var total = $('span', '#total').text();
var totalN = new Number(total.replace(/\s+/, '').replace(/Euro/, ''));
var final = totalN + 10;
$('<p/>').html('<strong>Totale completo: </strong>' + final.toString() + ' Euro').
appendTo($(this));
event.preventDefault();
});
},
// continua
Infine, abbiamo bisogno di un metodo di inizializzazione del nostro oggetto:
// continua
init: function() {
this.trigger();
this.activate();
this.add();
this.send();
}
};
il quale verrà usato in questo modo:
$(function() {
Cart.init();
});
Ho omesso le operazioni di validazione dei valori dei campi di testo per semplicità e per concentrarmi più sulle operazioni di calcolo. In linea di massima si deve:
- impedire che l'utente inserisca un valore vuoto o non numerico
- impedire che l'utente inserisca 0 o un valore negativo
Tali operazioni andrebbero inserite nel metodo add(). Di seguito un esempio approssimativo:
var value = $input.val();
if(value == '' || value == '0' || !/^\d+$/.test(value)) {
// errore da notificare
return;
}
Potete visionare l'esempio finale in questa pagina.