Magento + JQuery + Ajax – 如何重新加载我的自定义模块的部分而不是整个块？

我最近刚刚完成了在5天内为我们的Magento模板创建一个简单的产品配置器的任务，您可以在其中选择一些属性并为您计算价格，淡化新图像并将添加到购物车按钮更改为新的产品。

在此之前，我没有PHP或JQuery的经验，只有Magento的一些基础知识（以前从未做过自定义模块。）我唯一的编程背景是OOP Games in Action Script 3。

到目前为止我的代码以某种方式工作 我有一些变量，我可以点击一些单选按钮更改，变量通过ajax方法更新。 作为URL我的块索引方法被调用，它只加载和渲染我的布局。 我将返回的HTML（这是我的整个块）添加到我的块中最外层div的父级之后。 它工作但似乎无法找到一种方法来动画更改，如果每次用户只更改一个选项时ajax重建整个块，它似乎有点慢。

有没有更优雅的方式来重新加载更改的部分，平滑地动画更改并使我的块记住所做的输入？

以下是源文件： http ： //www.roflxd.de/doorconfig.zip

如果您需要查看网站本身，请给我发消息:)

提前致谢！

我的座位phtml：

getProduct($type,$color,$size); $currentId = $currentProduct->getId(); $currentUrl = $currentProduct->getProductUrl(); $currentPrice = $this->getPrice($currentId); $currentImgUrl = $this->getDoorBaseImgUrl($type, $size); ?> 
 
 
 
 White Black Grey 
 
     
 https://stackoverflow.com/questions/16920083/magento-jquery-ajax-how-do-i-reload-just-parts-of-my-custom-module-instead/ 
 
   
 isSaleable()): ?>  <a href="https://stackoverflow.com/questions/16920083/magento-jquery-ajax-how-do-i-reload-just-parts-of-my-custom-module-instead/"> Test    Out of Stock  
 
 
 
 <img src="https://stackoverflow.com/questions/16920083/magento-jquery-ajax-how-do-i-reload-just-parts-of-my-custom-module-instead/"> 
 
 
 
  var $col = "000000"; var $type = "Advanced"; var $size = "3050x2150"; function ajaxUpdate() { $j.ajax({ url: "/doorconfig/ajax/index", type: "POST", data: {color : $col, type : $type, size : $size }, context: $j('#door_wrapper').parent(), success: function(data) { $j(this).html(data).$(this).fadeIn(slow); } }); }; $j(document).ready(function() { $j("input[name=toggle]:radio").change(function () { ajaxUpdate(); }) });  

我的块php：

  getCollection(); //Select needed Attributes $collection->addAttributeToSelect('doorconfig_enable'); $collection->addAttributeToSelect('doorconfig_color'); $collection->addAttributeToSelect('doorconfig_size'); $collection->addAttributeToSelect('doorconfig_type'); //Filter for Selected Product $collection->addFieldToFilter('doorconfig_enable', array( 'eq' => Mage::getResourceModel('catalog/product') ->getAttribute('doorconfig_enable') ->getSource() ->getOptionId('Yes') ) ); $collection->addFieldToFilter('doorconfig_color', array( 'eq' => Mage::getResourceModel('catalog/product') ->getAttribute('doorconfig_color') ->getSource() ->getOptionId($color) ) ); $collection->addFieldToFilter('doorconfig_size', array( 'eq' => Mage::getResourceModel('catalog/product') ->getAttribute('doorconfig_size') ->getSource() ->getOptionId($size) ) ); $collection->addFieldToFilter('doorconfig_type', array( 'eq' => Mage::getResourceModel('catalog/product') ->getAttribute('doorconfig_type') ->getSource() ->getOptionId($type) ) ); $product = $collection->getFirstItem(); return $product; } public function getPrice($id) { $product = Mage::getModel('catalog/product')->load($id); $_taxHelper = new Mage_Tax_Helper_Data; $finalprice = $_taxHelper->getPrice($product, $product->getFinalPrice(), true); $finalprice .= $this->getCurrency(); return $finalprice; } public function getCurrency() { return Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol(); } public function getDoorImageDir() { return Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'wysiwyg/geeklab/doorconfig/'; } public function getDoorBaseImgUrl($type, $size) { return $this->getDoorImageDir() . strtolower($size) . '_' . str_replace("\040", "\137", strtolower($type)) . '.png'; } public function getDoorColorImgUrl($color, $size) { return $this->getDoorImageDir() . strtolower($size) . '_' . strtolower($color) . '.png'; } } ?> 

和我的AjaxController.php

  loadLayout(); $this->renderLayout(); } } ?> 

Answer 1

所以我提出了一个非常棒的解决方案。 在我的ajax调用期间，我添加了另一个控制器操作和一个模型来执行Magento交互。 所以，让我告诉你它是如何完成的，我希望有人能早晚从中获益:)

我的新动作：

 public function updateAction () { //Instantiate Product Model $productModel = Mage::getModel('doorconfig/product'); //Get Updated Values from the Model $currentProduct = $productModel->getProduct($_POST); $currentProductId = $currentProduct->getId(); $currentProductUrl = $currentProduct->getProductUrl(); $currentPrice = $productModel->getPrice($currentProductId); $currentType = $this->getRequest()->getPost('doorconfig_type'); $currentSize = $this->getRequest()->getPost('doorconfig_size'); $currentProductBaseImgUrl = $productModel->getDoorBaseImgUrl($currentType,$currentSize); //Populate Resultarray $result = array("currentProductId"=>$currentProductId,"currentPrice"=>$currentPrice,"currentProductUrl"=>$currentProductUrl,"currentProductBaseImgUrl"=>$currentProductBaseImgUrl); //Encode Result in JSON $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result)); return $result; } 

我的模型刚从我的块中获得了大部分业务逻辑，所以没有什么特别值得指出的。

最后更新的Ajax部分现在触发我的新控制器操作，接收结果作为JSON编码并更改DOM中的值：

如果您需要任何进一步的解释或想要改进的东西请评论:)