Como Criar Requisições Ajax no Magento

Neste artigo descreverei um passo a passo de como construir uma action em ajax no Magento. Utilizaremos os seguintes elementos de um módulo básico: controllers, blocks e helpers. Desta forma o leitor poderá entender melhor a arquitetura do Magento e melhorar o seu entendimento sobre estrutura e suas atribuições.

magento-requisicao-ajax-01

Vamos começar descrevendo o bloco Index.php, MM_Ajax_Block_Index (MM/AJax/Block/Index.php).

/**
* MM Ajax
*
* @category MM
* @package MM_Ajax
* @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
* @author MM (Thiago Caldeira de Lima)
* @version Release: 0.1.0
* @Class MM_Ajax_Block_Index
*/
class MM_Ajax_Block_Index extends Mage_Core_Block_Template
{
 /**
 * Provides ajax url action
 *
 * @return string
 */
 public function getAjaxUrl()
 {
 return Mage::getUrl('*/*/view');
 }

}
?>

Em seguida, o bloco View.php (MM/AJax/Block/View.php), que será responsável por fornecer o conteúdo da view.phtml.

/**
 * MM Ajax
 *
 * @category MM
 * @package MM_Ajax
 * @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
 * @author MM (Thiago Caldeira de Lima)
 * @version Release: 0.1.0
 * @Class MM_Ajax_Block_View
 */
class MM_Ajax_Block_View extends Mage_Core_Block_Template
{

 public function getFoods()
 {
 $foodType = $this->getRequest()->getParam('_type');
 return Mage::helper('ajax')->loadFoodData($foodType);
 }

}

Para este exemplo teremos apenas um controler, o AjaxController.php (MM/AJax/Block/View.php).

/**
 * MM Ajax
 *
 * @category MM
 * @package MM_Ajax
 * @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
 * @author MM (Thiago Caldeira de Lima)
 * @version Release: 0.1.0
 * @Class MM_Ajax_AjaxController
 */

class MM_Ajax_AjaxController extends Mage_Core_Controller_Front_Action
{
 /**
 * Main action
 *
 */
 public function indexAction()
 {

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

 }

 /**
 * Ajax action
 *
 */
 public function viewAction()
 {

 $block = $this->getLayout()
 ->createBlock('ajax/view')
 ->setTemplate('mm/ajax/view.phtml');
 $this->getResponse()->setBody($block->toHtml());
 }
}

A configuração do módulo, config.xml (MM/Ajax/etc/config.xml), ficará desta forma:

<!--?xml version="1.0"?-->
<!--
/**
 * MM Ajax
 *
 *
 * @category MM
 * @package MM_Ajax
 * @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
 * @author MM (Thiago Caldeira de Lima)
 * @version Release: 0.1.0
 */
-->
<config>
 <modules>
 <mm_ajax>
 <version>0.1.0</version>
 </mm_ajax>
 </modules>
 <frontend>
 <routers>
 <ajax>
 <use>standard</use>
 <args>
 <module>MM_Ajax</module>
 <frontname>ajax</frontname>
 </args>
 </ajax>
 </routers>
 <layout>
 <updates>
 <ajax>
 <file>mm/ajax.xml</file>
 </ajax>
 </updates>
 </layout>
 </frontend>
 <global>
 <blocks>
 <ajax>
 <class>MM_Ajax_Block</class>
 </ajax>
 </blocks>
 <helpers>
 <ajax>
 <class>MM_Ajax_Helper</class>
 </ajax>
 </helpers>
 </global>
</config>

O helper, Data.php (MM/Ajax/Helper/Data.php) fornecerá os dados requisitados pela chamada ajax.

/**
 * MM Ajax
 *
 * @category MM
 * @package MM_Ajax
 * @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
 * @author MM (Thiago Caldeira de Lima)
 * @version Release: 0.1.0
 * @Class MM_Ajax_Helper_Data
 */

class MM_Ajax_Helper_Data extends Mage_Core_Helper_Abstract
{
 /**
 * Provides an array of string
 *
 * @param string $_type
 * @return array
 */
 public function loadFoodData($_type)
 {
 $data = array();

 switch ($_type) {
 case 'foods':
 $data = array('beans','rices','potatoes');
 break;
 case 'drinks':
 $data = array('beers','wines','whiskeys');
 break;
 default:
 $data = array('beers','wines','whiskeys');
 break;
 }

 return $data;

 }
}

E para finalizar, o xml instalador do módulo, MM_Ajax.xml (app/etc/modules/MM_Ajax.xml)

<!--
/**
 * MM Ajax
 *
 * @category MM
 * @package MM_Ajax
 * @copyright Copyright (c) 2015 MM (http://blog.meumagento.com.br/)
 * @author MM (Thiago Caldeira de Lima)
 * @version Release: 0.1.0
 */
-->
<config>
 <modules>
 <mm_ajax>
 <active>true</active>
 <codepool>community</codepool>
 </mm_ajax>
 </modules>
</config>

Case deseje baixar o módulo criado neste artigo, basta acessar o GitHub

2017-01-24T20:24:06+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x