Custom price filter in Magento

Featured Image

Quite a few people have asked me for a price filter functionality that comes with Magento. Mostly, the questions are same: How does one put the price filter anywhere on the page? How does one set it’s on price ranges in that filter? What defines default price ranges. Is it possible to set price filter for all my products instead of just single category? Lot of questions. The answer might be simpler then you might think.

There are two ways to approach this problem. Head trough wall or stop and think approach.Default Magento price filter works with algoritam which functions on the following logic

  1. Find the lowest and highest price in the range of filtered products.
  2. Find what power of 10 these are in.
  3. If there’s 2 or less ranges available we go one power down.

So one approach would to be to somehow override default price filter logic by rewriting it and embedding some new logic of yours. I call this one head trough wall. I’m not implying that this is wrong approach, on the contrary this is the generic solution. However it does require some more time to come up with.

Second solution is by far more easier. It involves using simple HTML (could use it in your static blocks).

If one wishes to use the price range filter to filter trough entire product collection he can simply create a subcategory under the Default root category and add all of the products to it. Then we write some static html code with urls made to fire up the price filter.

Let’s look at the default Magento sample data. It gies you the following category layout

Root Catalog (6)

  • Furniture (6)
  • Living Room (4)
  • Bed Room (4)

Notice the url link above… It wont work if you put it like http://somesite.domain/furniture/living-room/?price=1%2C199
It wont work like that because by default you do not have price filter functionality covering second subcategory level. What this means is that following link wont work

http://somesite.domain/furniture/living-room/?price=1%2C199

Note that %2C is ASCII for comma (,).

Since the first subcategory level is Furniture, and second are Living Room and Bed Room, by default the following url will work with or without index.php.

  • url: http://somesite.domain/furniture/?price=1%2C199
  • url: http://somesite.domain/index.php/furniture/?price=1%2C199

You could therefore create simple HTML like

<select onchange="setLocation(this.value)">
	<option value="http://</em>somesite.domain/all/?price=1%2C10000"><!-- Here you place your own ranges -->
		0,00 € - 10 000,00 €
	</option>
 
	<option value="http://</em>somesite.domain/all/?price=2%2C10000"><!-- Here you place your own ranges -->
		10 000,00 € - 20 000,00 €
	</option>
 
	<option value="http://</em>somesite.domain/all/?price=3%2C10000"><!-- Here you place your own ranges -->
		20 000,00 € - 30 000,00 €
	</option>
.
.
.
</select>

And put it into some of the static block. Notice the links in above HTML code. The /all part of the url is the url key of the All category in which we added all of our products.

Last, but not least is understanding of the “price=…” parameter.

1%2C10000 – where 1 stands for first range of 10000 (last number)
or
2%2C10000 – where 2 stands for second range of 10000, (first would be 0-10000).

So if we were to write something like
3%2C10 it would be the price range from 20-30, where 3 stands for third range of tens (number 10). Firs is from 0-10, second 10-20, third 20-30.

Most of this is quite selfexplanaory so, for those who need this kind of functionality across some special pages, hope you integrate it withouth any problems.


20 comments

  1. Help required
    yoursabjiwala.com/vegetables/common/desitomato.html Open this url and you will see that it will show the base price of the product but, when he select the Qty* which provides the custom option of the product it alters the actual price where as in Sahar template MAGENTO it adds up the price to the actual price What i want actual price <- alter in price = new price 100 <- 250 gm 3.50 rs = total price 3.50 what is happening actual price + add price = new price 100 <-250 gm 3.50 rs = total price 103.50

  2. I am actually trying for customizing price filter.How i can make the range 75 – 300 or 100 – 250.I am not getting how i should do that.And aldo what is this “2C” in 2%2C1000.
    CAN ANYONE PLEASE HELP ME

  3. Hi..

    I want to add price filter slider in product page on the right side.

    Pl. tell me how can i do this.

    Thanks
    Rishabh

  4. hi
    i want to customise price filter.
    i just want two filter options
    first one is lower then $2000
    and second one is upper then $2000

    So can you please help me for this

    Regards

  5. I am facing a problem in magento layered navigation.I want price filter like as given below:

    Under $38 (5)

    $38 – $43(5)

    $44 – $48(3)

    Larger than $48 (3)
    how to do this?

    Thank You

    1. hi
      i have the same problem
      could you find the answer?
      tell me please
      i need it
      thanks a lot

  6. i default magento filter works on a category at a time. But i want
    when i click on price filter it shows all filtered product of all categories.

  7. Thank you so much for the tutorial, can you please guide me how to add a filter for “Best Sellers” and “New Arrivals” on product listing page’s left sidebar?

    I mean to say I want to add two links on product listing page’s left sidebar.

    – Best Sellers
    – New Arrivals

    When clicked “Best Sellers” only the best selling products from that category will be listed and when “New Arrivals” link clicked products will sorted by data DESC.

    any help will be highly appreciated.

    Thanks

  8. Hey Branko,

    Thanks for the great post.

    I am starting out with magento so pls excuse my banality.
    Is there a way to create a customer filter from the front end?

    Thanks in advance,
    Amit

  9. this ans is good, but when we want to select products filter by price or any attribute of all catagoty what we will do.

    please give me replay

  10. i have made a custom attribute and i want to filter my complete store with it is it possible i.e

    i have devices for example w995i user select its device when it hits my site and all categories will be filtered and displays only those products whose attribute value is set to w995i .. can this be possible..

    i need it…please

  11. I know that’s a pretty old topic, but I tried this way of doing it and it works pretty well. The only thing is the breadcumb will always be related to the “all” category and not to any other one.
    Do you know a way to take another category?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.