Drupal 8 – Создание кастомной Ajax команды

Продолжаем рассматривать Ajax API в Drupal 8, вы уже знаете, как создать кастомную Ajax ссылку, а так же узнали, какие еще существуют Ajax команды, но на этом возможности Ajax API не заканчиваются.

Очень часто приходится сталкиваться с ситуацией, когда существующих Ajax команд не хватает и связано это, как правило, с использование сторонних библиотек, когда библиотека имеет свой набор команд и свойств.

Сегодня мы рассмотрим, как создавать свою кастомную Ajax команду, естественно весь процесс будет реализован в кастомном модуле, в моем случае он будет называться – custom_ajax_command.

Весь процесс расширения списка Ajax команд, можно разделить на 2 этапа:

• Определение Ajax команды (название, переменные)
• Описание Jquery метода, для данной команды

В нашем случае добавится еще пару пунктов:

• Создание библиотеки, которая будет содержать наш Jquery метод
• Подключение библиотеки на страницу

Создаем модуль – файл custom_ajax_info.yml

name: 'Custom Ajax Command'
description: 'Простая реализация кастомной Ajax команды'
core: 8.x
type: module
package: 'Other'
version: '8.x-1.0'

Определяем кастомную Ajax команду – файл CustomAjaxCommand.php

<?php

namespace Drupal\custom_ajax_command\Ajax;
use Drupal\Core\Ajax\CommandInterface;

class CustomAjaxCommand implements CommandInterface {

  protected $message;
  # Constructs
  public function __construct($message) {
    $this->message = $message;
  }

  # Implements Drupal\Core\Ajax\CommandInterface:render().
  public function render() {
    return array(
      'command' => 'customAjaxCommand',   // Обязательное свойство - определяет название кастомного Jquery (JS) метода, которая будет запущена
      'message' => $this->message,        // Переменные, которые будут доступны в response
    );
  }
}

Хочу заметить, кто забыл, в Drupal 8 разработка строится по стандарту PSR-4, соответственно все классы должны находится в директории src вашего модуля.

Описываем Jquery метод, для кастомной команды – файл custom_ajax_command.js. Данный файл будет находится в директории js вашего модуля.

(function($, Drupal) {

  if(Drupal.AjaxCommands){

    // Custom Ajax command
    Drupal.AjaxCommands.prototype.customAjaxCommand = function(ajax, response, status){
      alert(response.message);
    }

  }

})(jQuery, Drupal);

Далее, создаем библиотеку, которая будет содержать файл с описанием Jquery метода, нашей Ajax команды.

Файл custom_ajax_command.libraries.yml

# Libraries for Custom Ajax command
custom_ajax_command:
  version: VERSION
  js:
    # Add JS files
    js/custom_ajax_command.js: {}
  dependencies:
    - core/drupal.ajax
    - core/jquery
    - core/jquery.once
    - core/drupal

Теперь нам осталось подключить данную библиотеку на страницы нашего сайта.

Хочу заметить, что мы подключаем данную библиотеку на все страницы сайта только в качестве примера, на своих сайтах всегда подключайте библиотеку только там, где она необходима.

Файл custom_ajax_command.module

<?php

/**
 * @param $variables
 * Implements hook_preprocess_page()
 */
function custom_ajax_command_preprocess_page(&$variables){

  $variables['#attached']['library'][] =  'custom_ajax_command/custom_ajax_command';

  # Add libraries for anonymous
  $logged_in = \Drupal::currentUser()->isAuthenticated();
  if(!$logged_in){
    $libraries['#attached']['library'][] = 'core/drupal.ajax';
  }

  render($libraries);

}

С созданием кастомной Ajax команды мы закончили, теперь вы можете ее использовать в ваших контроллерах

<?php

use Drupal\custom_ajax_command\Ajax\CustomAjaxCommand;

# Custom Ajax command
$message = 'Этот alert() был запущен из кастомной Ajax команды';
$response->addCommand(new CustomAjaxCommand($message));

Скачать модуль используемый в примере

Скачать