Blank Layout

AJAX Filters for Category Pages

Dropshadow BottomLeft Dropshadow TopRight

We recently released our new Category and Search pages with AJAX filtering. The design team gave us wireframes for how they wanted it to look and I discussed implementation strategies with the Technology Director.

What we ended up doing was creating AJAX filters that use Magento's built in Faceted Search functionality. So each "dropdown" filter is a filterable attribute in Magento with a custom built presentation model. I created a new AJAX controller that handles the callback. The controller's response is a JSON message that contains the new HTML to be displayed: one for the filters and one for the page content.

I used jQuery to create the flyout animation and to handle the AJAX requests.

Development