Як використовувати AJAX-запити в Magento

AJAX (Asynchronous JavaScript And XML — Асинхронний JavaScript та XML) – це вже досить застаріла, але дуже популярна технологія у Веб, яка дозволяє отримувати інформацію з сервера, не перезавантажуючи всю сторінку (а оновлюючи лише потрібні блоки сайту).

В цьому уроці ми розглянемо практичне використання технології AJAX у вашому власному модулі, який розроблений для CMS Magento.

 

 

Практика

1) Створіть контролер у своєму модулі за наступною адресою, для прикладу:

Namespace/ModuleName/controllers/AjaxController.php  

або ж створіть новий action (дію) у вже існуючому контролері.

 

2) Щоб створити дію у контролері, наприклад indexAction(), додайте цей код у файл контролера:

 

public function indexAction() {    $this->loadLayout();    $this->renderLayout();  }  

 

3) Потім додайте у файл оновлення макету в темі, наприклад

app/design/frontend/ThemePackage/Theme/layout/ajax-layout.xml  

такий код:

 

<modulename_ajax_index>    <block type="modulename/block" name="root" template="path/to/template.phtml" />  </modulename_ajax_index>  

 

де нод modulename – це маршрутизатор фронтенду, ajax – це назва контролера, а index – назва дії контролера

 

4) Після цього додайте оновлення макету у файлі config.xml в папці etc модуля:

 

<layout>    <updates>      <modulename>        <file>ajax-layout.xml</file>      </modulename>    </updates>  </layout>  

 

5) Після цього очистіть кеш і ви будете мати доступ до екземпляру класу Block з файлу-шаблону template.phtml

 

6) І, нарешті, щоб протестувати гарну роботу, викликаємо Ajax контролер з шаблону за допомогою простого JavaScript, наприклад:

 

xmlhttp.open("GET","/modulename/ajax/index/test/"+value,true);  

 

або ж за допомогою бібліотеки jQuery:

 

jQuery.ajax({    url: "<?php echo $this->getUrl('modulename/ajax/index'); ?>",    type: "POST",    data: "size="+jQuery(this).val(),    success: function(data) {     jQuery('#results').html(data);    }  });