List of Magento products using ajax

Question

I need to add 5 separate tabs, such as category, our collections, the most popular top ratings, your favorites on the home page itself, and each of them should list products under this without a complete page reload. This is using ajax, is it possible in magento.

If so, please help me with this.

Answer 1

You can name the actions of the Magento controller with AJAX, as Joseph said.

We used this approach in one of our latest projects:

New module

. , - , http://www.magentocommerce.com/wiki/5_-_modules_and_development/0_-_module_development_in_magento/custom_module_with_custom_database_table - , .

, , http://yourmagento/yourmodule/index/ indexAction() IndexController. IndexController :

<?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 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;
            } 
        }
    }

URL- , , jQuery ( , , , magento - )

, ( ):

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)
        });
    });

, .

..,

Flo