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

23/01/2018

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