jQuery: calcolare un totale con percentuale di sconto

Sicuramente vi sarà capitato di dover implementare un bottone per l'aggiornamento dinamico di un carrello di e-commerce. Finchè si tratta di eseguire somme e moltiplicazioni non c'è effettivamente alcun problema. Il caso si complica quando è richiesto il calcolo della percentuale di sconto sul totale. Vediamo come affrontare questa situazione.

È sufficiente definire la seguente funzione:

function calculateDiscount(total, percentage) {
        
        var discountValue = (total / 100) * percentage;
        var finalPrice = total - discountValue;
        
        return finalPrice.toFixed(2);
}

Questa funzione accetta come parametri il totale e la percentuale di sconto. Il prezzo finale viene calcolato sottraendo dal totale lo sconto effettuato. Il metodo toFixed() viene in questo caso usato per arrotondare il numero ottenuto alla seconda cifra decimale.

Attenzione però: bisogna fare in modo che i valori presi dal carrello siano numeri. Per questo motivo occorre utilizzare il costruttore dell'oggetto Number. Per una maggiore precisione, possiamo utilizzare il già citato metodo toFixed() sul nuovo numero creato.

Ecco l'esempio con jQuery:

$('#form').submit(function(event) {
    
    	var price = new Number($('#prezzo').val());
    	var qty = new Number($('#qty').val());
    	var discount = new Number($('#sconto').val());
    	
    	var subTotal = price * qty;
    	
    	var total = calculateDiscount(subTotal, discount);
    	
    	$('span', '#total').html(' ' + total + ' €');
    	
    	event.preventDefault();
    
});

Il totale è sempre dato dal prezzo moltiplicato per la quantità. Se avete campi multipli dovete usare un ciclo each() sui campi dopo aver inizializzato una variabile su 0. Vi consiglio di usare delle classi CSS sui campi per distinguerli. Quindi addizionate il risultato ottenuto di volta in volta alla variabile precedentemente inizializzata.

Ovviamente dovreste eseguire prima delle verifiche sui campi o sugli elementi che contengono i valori per verificare che non contengano caratteri che renderebbero impossibile la conversione in numeri. Infatti è sufficiente anche un solo carattere non previsto per generare il risultato NaN (Not A Number).

Potete visionare l'esempio finale in questa pagina.