Custom price filter in Magento

Posted by Branko Ajzele under Magento @ 3rd NOV 2008

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

You could therefore create simple HTML like

<select onchange=”setLocation(this.value)”>
<option value=”http://somesite.domain/all/?price=1%2C10000″>  <!– Here you place your own ranges –>
0,00 € - 10 000,00 €
</option>
<option value=”http://somesite.domain/all/?price=2%2C10000″> <!– Here you place your own ranges –>
10 000,00 € - 20 000,00 €
</option>
<option value=”http://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=…” parametar.

1%2C10000 - where 1 stands for first range of 10000 (last number)
or
2%2C10000 - where 2 stands for second ranfge 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.