Developer forum

Forum » Templates » Price range filtering

Price range filtering

E-mail notifications
Tomas Gomez
Reply
Posted on 09/11/2022 14:53:31

Hi,

We need to implement a slider to filter a range of prices. For instance, to show only the products from 100 to 200 EUR. Our client wants a slider by design, not possible to display checkboxes with price ranges (as asked here), neither two text fields to enter the minimum and maximum values (as explained here)

The slider has to have two inputs (minimun and maximum) but the input type="range" of HTML5 has only one input (the value of the mark).

At your experience, which is the best soution? Using jQuery? Another simplier way?

Regards,
Tomas

 


Replies

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Posted on 10/11/2022 15:37:21
Reply

Use something simple like this: https://www.cssscript.com/demo/range-slider-om/ in combination with the implementation you found here: https://doc.dynamicweb.com/documentation-9/how-tos/general/implementing-a-pricerange-query

The range slider basically gives you 2 values - a min and a max.

From a UX perspective, range sliders are not a very good solution - they might be fun to make, but it is now how shoppers think...

More range sliders here: https://openbase.com/categories/js/best-vanilla-javascript-range-slider-libraries

 
Tomas Gomez
Posted on 16/11/2022 14:58:36
Reply

Hi Nicolai,

Hi Nicolai,

Thanks for the advise!  I'm using your first sample (https://www.cssscript.com/demo/range-slider-om/)

The problem is that, for a range facet, the generated URL contains brackets after the facet name.

For instance, when using a query parameter "PriceRange" (defined as System.Double[]) and a facet of type range (defined as Type=Range):

  • The generated URL is: /e-bikes/e-mountain-bikes?PriceRange[]=4000&PriceRange[]=5000
  • It should be: /e-bikes/e-mountain-bikes?PriceRange=4000&PriceRange=5000
  • Or: /e-bikes/e-mountain-bikes?PriceRange=4000,5000

How should I do to avoid those brackets? I tried changing the configuration both of the query parameter and the facet without success.

Regards,
Tomas

 
Tomas Gomez
Posted on 17/11/2022 10:09:23
Reply

Mistery solved!

It has nothing to do with DW. The source of the brakets is the external js.

Regards,
Tomas

 

You must be logged in to post in the forum