使用Ajax的Magento产品列表 [英] Magento product listing using ajax

问题描述

我必须添加5个单独的标签，例如按类别"，我们的选择"，最受欢迎"，您最喜欢的主页"，每个标签都应列出该标签下的产品，而无需重新加载整个页面.那就是使用ajax，是否可以在magento中使用.

如果是的话，请指导我.

解决方案

就像约瑟夫所说的那样，人们可以使用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

这篇关于使用Ajax的Magento产品列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！