且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用Ajax的Magento产品列表

更新时间:2023-11-30 12:20:10

就像约瑟夫所说的那样,人们可以使用AJAX调用Magento控制器动作.

我们在最近的一个项目中使用了这样的方法:

新模块

创建一个新模块并在其中创建一个新控制器.这可以通过通常的方式完成,网络上也有一些关于它的教程-例如 http://www.magentocommerce.com/wiki/5_-__modules_and_development/0_ -_module_development_in_magento/custom_module_with_custom_database_table -忽略数据库部分,有趣的是控制器部分.

控制器

比方说,您拥有模块和 http://yourmagento/yourmodule/index/ 指向IndexController中的indexAction().您的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'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;
            } 
        }
    }

模板

您可以在模板中调用该url,例如通过jQuery(我确实喜欢使用它,但是请注意magento使用原型这一事实-您可能要注意名称空间冲突)>

尽管如此,这是一个示例调用(我将其绑定到元素上的click事件):

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

希望,会有所帮助.

lg,

flo

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