Question

I’m trying to implement AJAX filtering on my own e-commerce website and looking for the best solution.

With what I’ve come up is:

Making all content statically generated (built by server-side and then calling ajax request on the same page but with parameters). The only cons is that user doesn’t have any back history as his URL page doesn’t change.

I would try to implement history.api and etc but just saw this awesome filtering right here: http://trendygolf.com/shop?brand%5B%5D=15&brand%5B%5D=27&price-min=0&pricemax=2000&sort=newest

From what I see it makes AJAX calls AND changes the URL without reloading the page, how is that even possible?

And of course it simply replaces the old html page with the new one from request

I would love to hear some help on this one, what are best practices, pros/cons, and how does trendygolf.com make it like this.

Answer 1

It sounds like you could use the History.js library, which lets you change the browser’s state/URL from JavaScript. Basically this library uses the HTML5 History API if available, but can emulate it in browsers which don’t support this. History.js is a low-level API though, and you may want to use a Router abstraction on top of it, which simplifies your programming considerably. For this purpose I’ve implemented the StateRouter.js library.

A simple example of how one may use StateRouter.js:

function getHome() {
}
function getPersons() {
}
function getPerson(id) {
}

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);

$(document).ready(function () {
    // Perform initial routing
    router.perform();

    // Navigate to a URL
    router.navigate('/persons/1');

    // Go back
    router.back();

    // Go forward
    router.go(1);
});