Ecommerce: Filtro prezzo in ajax con jQueryUI range slider

Filtro prezzo in gallery ajax con jQueryUI range slider


Dopo aver implementato diversi filtri ajax per le gallery prodotto nel nostro ecommerce SmartShop (per taglia, colore, attributi custum, categoria etc..)
oggi abbiamo migliorato la funzionalità di filtraggio dei prodotti in base al prezzo.


In particolare l'obiettivi da ottenere erano:

• filtrare per prezzo la galleria prodotti dell'ecommerce
• poter filtrare un range (dal/al) di prezzi
• che il filtraggio dei prezzi contribuisse a ricalcolare gli altri filtri 
• che il range min e max impostabile sul filtro dei prezzi non fosse fisso ma dinamico calcolato in base al filtraggio che effettua l'utente per aiutarlo
• scegliere il controllo per la selezione dei prezzi più idoneo e dargli un design coerente al sito

Per fare questo, dopo un paio di analisi abbiamo realizzato questo mockup:

Il controllo utilizzato è lo slider della libreria jQueryUI in modalità range per selezionare una fascia di prezzo.


Il controllo è completamente integrato nel nostro sistema dinamico di filtraggio per attributi ajax del nostro ecommerce.


Questo è il risultato finale:

Questo invece un semplice video che fa vedere in azione il filtro montato sull'ecommerce di un nostro cliente:





Ovviamente è possibile vedere in azione il filtro live qui su www.yousporty.com