jQuery: aggiornare un carrello di e-commerce

Possiamo usare jQuery per associare una funzione di aggiornamento di un carrello di e-commerce ad un pulsante. La funzione semplicemente si limita a sommare ad una variabile il risultato della moltiplicazione tra il prezzo e la quantità dei prodotti. Vediamo insieme i dettagli.

Il nostro carrello è una tradizionale tabella contenuta all'interno di un form:

<form action="#" id="cart" method="post">
	<table summary="Carrello" id="table-cart">
		<thead>
			<tr>
				<th scope="col">Descrizione</th>
				<th scope="col">Quantità</th>
				<th scope="col">Prezzo</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Prodotto 1</td>
				<td><input type="text" name="qty" class="qty" value="1" /></td>
				<td>13 &euro;</td>
			</tr>
			<tr>
				<td>Prodotto 2</td>
				<td><input type="text" name="qty" class="qty" value="1" /></td>
				<td>22.50 &euro;</td>
			</tr>
			<tr>
				<td>Prodotto 3</td>
				<td><input type="text" name="qty" class="qty" value="1" /></td>
				<td>30 &euro;</td>
			</tr>
		</tbody>
	</table>
	
	<p id="total"><strong>Totale:</strong> <span>65.50 &euro;</span></p>
	
	<p><a href="#" id="update">Aggiorna carrello</a></p>

</form>

Come si può notare, le righe significative della tabella sono all'interno dell'elemento tbody. In questi casi è di fondamentale importanza che la tabella del carrello sia strutturata in modo corretto per facilitare il lavoro sul DOM.

Ora dobbiamo estrarre dalla tabella i prezzi e le quantità dei prodotti, trasformarli in numeri ed eseguire le nostre operazioni. Per fare questo dobbiamo essere sicuri che gli elementi contengano solo cifre.

Il codice jQuery è il seguente:

function updateCart(event) {
	
	    var total = 0;
	    
	    $('div.error').remove();
	
		$('tbody tr', '#table-cart').each(function() {
		
			var $tr = $(this);
			var qty = $('input.qty', $tr).val();
			var price = $tr.find('td').eq(2).text();
			
			if(!/^\d+$/.test(qty)) {
			
				$('<div class="error"/>').html('Specificare quantità').
				insertAfter('#total');
				
				return;
			
			}
			
			var $qty = new Number(qty);
			var $price = new Number(price.substring(0, price.length-1));
			
			total += $price * $qty;
			
		
		
		
		});
		
		$('span', '#total').html(total.toFixed(2) + ' &euro;');
		
		event.preventDefault();
	
}
	
$('#update').bind('click', updateCart);

Tramite il costruttore dell'oggetto Number operiamo la conversione da stringhe a numeri. Quindi usiamo l'operatore += per sommare al totale il risultato della moltiplicazione tra prezzo e quantità. Infine usiamo il metodo toFixed() per visualizzare il numero con due cifre decimali.

Potete visionare l'esempio finale in questa pagina.