Webshop: Product filtering and pagination with PHP and JQuery

Question

I'm building a webshop and want to make some product filters with PHP and Jquery.

What's the best way to do that? For example, i want to filter my products on price, feautures, brand, colors etc. I also want to use pagination.

The filtering itself (with PHP and reload in page) won't be any problem, but how to keep the filters when going back (history button) from a product page to the category page.

The way i did it once: Make a hash in the URL, so: http://www.domain.com/categoryname/#FILTERcolor=blue&size=1 etc. My Jquery was as follows:

if(location.hash != ''){
    poststr = location.hash;
    pattern = /^#FILTER/
    if(pattern.test(poststr)){
        ajax('assets/php/ajax/productfilter.php',poststr.replace('#FILTER',''),callbackfunction);
    }
}

When i went back to the category page, the hash was still in the URL, so reaload with AJAX.

Are there better ways to make product filters?

felixfbecker felixfbecker · Accepted Answer · 2015-01-14T00:06:30

If you're using jQuery and you're building a modern webpage, then don't reload the whole page after the user sets a filter. Instead, use AJAX-requests to get the results, and when the user selects a filter, only update the result list with jQuery without reloading the page. You can make an AJAX request to your PHP script and pass it the filters and something like show results 0 to 50, get the results back JSON-encoded and display them on your webpage. When the user asks for the next page, you do the same request again but tell it to show results 50 to 100. You can still save the filters in the hash, so users can copy and share the link with filters for example.

Webshop: Product filtering and pagination with PHP and JQuery

1 Answers