Product filters ajax

Hi,

I have been looking into altering nopCommerce so that the product filters update the list of products without reloading the page but I can't see a way of doing it without significantly altering the code. I have altered ProductsInLine1.ascx to show the filters in a left hand column (using one column masterpage).

Has anyone had a go at this? Is it possible?

Thanks

It is possible, I've seen it in "for pay" themes. I've been thinking about putting together an example of this. It doesn't seem like it would be too hard using update panels.

Yes it is possible, The issue with using ajaz though is that the filter params are stored in the query string, requiring a postback to alter it. This of course requires a page refresh to update the query string. You'll have to look at other ways of storing the filer params.

I've just done this on a nopCommerce 1.8 and a 1.9 project and it was not possible without using some code changes. I used update panels, Ajax and jQuery to achieve this. Both sites are currently still in development, but I will post here with links when they are live.

What version of nopCommerce are you using?

Cheers,

Chris

Sorry I've been away for a few days. Thanks for the replys.

I am using 1.90. When I had an initial look I did notice that I would have to find some other way to store the filter params so a code change is inevitable.

Hi Richard,
The way I have done this is to store the parameters after a # in the URL as this can be updated by javascript without refreshing the page, and it can be linked to (this is the way ASOS achieves this).
The steps (in brief) I took to do this were:

1) In the code, make it so each attribute option is represented by a checkbox and I applied an ID which was cbx-[ATTRIBUTEOPTIONID] and some Css Classes which reflected the SpecificationAttributeId, so for example:

<input type="checkbox" id="cbx-2" class="attribute-1 attributeCheckbox" />
Would be generated for a SpecificationAttributeOption with ID = 2 and the SpecificationAttributeId = 1.

2) I added a jQuery event listened for the checkbox onclick event (important to use onclick and not oncheck as it is not supported by IE)

3) on the onclick event, I stripped the 'cbx-' from the checkbox id (leaving just the specificationattributeid), disabled all other checkboxes with the class attribute-1 (so no more then one filter can be applied per specificationattribute)

4) I then added a string to the # of the url a:1/ (I use / as a seperator, and the a: denotes it is an attribute (I have used m: for manufacturers, p: for page and a few other options)).

5) In javascript I have then added the # value to a hidden field and updates an update panel which sorts all the code, gets all the filtered attributes and rebinds the product list with specifications applied.

I hope my very brief instructions make sense in some way!

Chris