Magento product listing using ajax

I have to add 5 separate tabs like By category,our picks, most popular top rated, your favorites in home page itself and each of them should list out the products under that one without full page reloading. That is using ajax , is it possible in magento.

If so please guide me on this.

One may call Magento controller actions with AJAX, just as Joseph said.

We used an approach like this in one of our recent projects:

New Module

Create a new module and create a new controller within. This can be done done in the usual way and there are some tutorials on the web about it - e.g. http://www.magentocommerce.com/wiki/5_-_modules_and_development/0_-_module_development_in_magento/custom_module_with_custom_database_table - ignore the database part, it's the controller part what's interesting.

The Controller

Let's say, you have your module and the http://yourmagento/yourmodule/index/ points to your indexAction() in your IndexController. Your IndexController might look like this:

<?php class YourNamespace_YourModule_IndexController extends Mage_Core_Controller_Front_Action {

        public function indexAction() {
            $id = $this->getRequest()->getParam('id');

            if($id) {
                $_category = Mage::getModel('catalog/category')->load($id);
                $product = Mage::getModel('catalog/product');

                //load the category's products as a collection
                $_productCollection = $product->getCollection()
                    ->addAttributeToSelect('*')
                    ->addCategoryFilter($_category)
                    ->load();

                // build an array for conversion
                $json_products = array();
                foreach ($_productCollection as $_product) {
                    $_product->getData();
                    $json_products[] = array(
                                'name' => ''.$helper->htmlEscape($_product->getName()).'',
                                'url' => ''.$_product->getProductUrl().'',
                                'description' => ''.nl2br($_product->getShortDescription()).'',
                                'price' => ''.$_product->getFormatedPrice().'');
                }

                $data = json_encode($items);

                echo $data;
            } 
        }
    }

The Template

You can call that url in your template, for example via jQuery (I do like to use it, however, keep an eye on the fact, that magento uses prototype - you may want to look out for namespace conflicts)

Be that as it may, here is a sample call (I bound it to a click event on an element):

var url = 'http://yourmagento/yourmodule/index/';
var value = 32; // your category id

    $('#clickMe').click(function() {
        $.ajax({
            url: url,
            type: 'POST',
            data: {id: value},
            success: function(data) {
            // you get the json back and can populate your html with it (e.g. your tab)
        });
    });

Hope, that helps.

lg,

flo