Widget in jQuery per gestire le quantità

Spesso quando si ha a che fare con ecommerce o carrelli, ci si ritrova con la necessità di utilizzare un sistema immediato per gestire l’inserimento di quantità di oggetti. Possiamo comodamente ricorrere ad innumerevoli plugins oppure, strada consigliata, crearne uno nostro molto semplice, sul quale potremo sempre intervenire con maggior facilità.

Quello che andiamo a realizzare è un semplice sistema che:

• Aumenta o diminuisce un valore presente nel campo input
• Permette l’inserimento di un numero direttamente nel campo
• Controlla che il numero inserito sia realmente un numero
• Impedisce di inserire quantità negative

La struttura del Widget

Come possiamo vedere saranno sufficienti un campo di testo e 2 bottoni che si occupano di aumentare o ridurre la quantità inserita.

<div class="quantity-widget">
<button class="less">-</button> <input type="text" value="1" /> <button class="more">+</button>
</div>

Il codice jQuery

function quantityWidget(){
    var currval;
    $(".quantity-widget .less").click(function(){
        currval = parseInt($(this).parent().find("input").val());
        if (currval > 0){
        $(this).parent().find("input").val((currval-1));
        }
    });
    $(".quantity-widget .more").click(function(){
        currval = parseInt($(this).parent().find("input").val());    
        $(this).parent().find("input").val((currval+1));
    });
    $(".quantity-widget input").keyup(function(){
        currval = $(this).val();
        var intRegex = /^\d+$/;
        var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;
        if(isNaN(currval)) {
            alert("Inserire solo numeri");
            $(this).val(1);
        }
    });
}
$(function(){
	quantityWidget();
});

Andiamo ad analizzare i punti saliente del codice completo appena riportato.

    var currval;
    $(".quantity-widget .less").click(function(){
        currval = parseInt($(this).parent().find("input").val());
        if (currval > 0){
        $(this).parent().find("input").val((currval-1));
        }
    });

Dichiariamo una variabile currval che rappresenterà il valore del campo input in ogni momento.
Al click sui pulsanti più (.more) o meno (.less) andiamo a prendere il valore presente nel campo input corrispondente e lo incrementiamo o riduciamo di 1. Il decremento viene fatto solo a condizione che il valore del campo input sia > di 0.

$(".quantity-widget input").keyup(function(){
        currval = $(this).val();
        var intRegex = /^\d+$/;
        var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;
        if(isNaN(currval)) {
            alert("Inserire solo numeri");
            $(this).val(1);
        }
    });

Nella seconda parte dello script verifichiamo, tramite un’espressione regolare (prendere e copiare così :)), se il valore inserito è un numero. Se non è un numero allora stampiamo un avviso e reimpostiamo il valore a 0.

Conclusioni e NOTA BENE

Lo script di per sè è molto semplice, tuttavia sono sicuro che possa tornare utile nel caso si stessero realizzando delle funzionalità personalizzate e non si volesse appesantire la pagina con codice inutile! L’unica attenzione è quella di utilizzare i tag corretti per le varie situazioni. L’uso di <button> infatti in presenza di form costringe ad impostare un ritorno falso, quindi ricordalo oppure utilizza dei normali <div>