Попытка выполнить Ajax-запрос из формы оформления заказа в WooCommerce через кастомный плагин.

Содержание

Вопрос или проблема
Ответ или решение
Параметры решения
Заключение

Вопрос или проблема

У меня есть собственный плагин со следующим кодом

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "gift_card_redeem", WP_PLUGIN_URL.'/plugin-folder/gift_card_redeem.js', array('jquery') );
   wp_localize_script( 'gift_card_redeem', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'gift_card_redeem' );

}

add_action("wp_ajax_gift_card_redeem", "gift_card_redeem");

function gift_card_redeem(){

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    error_log("тест !empty");
    $result['type'] = "успех";
    $result = json_encode($result);
    echo $result;
  }
  else {
    error_log("тест else");
      header("Location: ".$_SERVER["HTTP_REFERER"]);
  }

  die();
}

и файл js в плагине под названием gift_card_redeem.js

jQuery(document).ready(function () {
  jQuery(".redeem_gift_card").click(function (e) {
    e.preventDefault();

    jQuery.ajax({
      type: "post",
      dataType: "json",
      url: myAjax.ajaxurl,
      data: { action: "redeem_gift_card" },
      success: function (response) {
        if (response.type == "успех") {
          jQuery("#test").html(response);
        } else {
          alert("что-то сломалось");
        }
      },
    });
  });
});

и мой php и html на странице оформления заказа выглядят следующим образом

<?php
    $link = admin_url('admin-ajax.php?action=gift_card_redeem');
        echo '<a class="redeem_gift_card" href="' . $link . '" >тест</a>';
    ?> 

    <h1 id="test">Тест</h1>

У меня возникает ошибка 400 bad request для admin-ajax.php, и я не совсем понимаю, почему. Буду признателен за любую помощь.

Спасибо

Моя действие было неправильным в ajax-запросе

jQuery(document).ready(function () {
  jQuery(".redeem_gift_card").click(function (e) {
    e.preventDefault();

    jQuery.ajax({
      type: "post",
      dataType: "json",
      url: myAjax.ajaxurl,
      data: { action: "gift_card_redeem" }, // не redeem_gift_card
      success: function (response) {
        if (response.type == "успех") {
          jQuery("#test").html(response.type);
        } else {
          alert("что-то сломалось");
        }
      },
    });
  });
});

Ответ или решение

Для успешного выполнения AJAX-запроса из формы оформления заказа в WooCommerce с использованием вашего пользовательского плагина, необходимо учитывать несколько ключевых аспектов. Ваша исходная реализация была практически правильной, но важен правильный указатель для действия AJAX, который стал причиной ошибки 400. Давайте рассмотрим все этапы более подробно.

Параметры решения

Правильная регистрация и локализация скриптов
Ваш код для регистрации и локализации JavaScript выглядит хорошо. На этом этапе вы используете функцию wp_localize_script для передачи переменной JavaScript (myAjax), которая будет хранить URL для admin-ajax.php. Это критически важно для выполнения AJAX-запроса:
```
add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "gift_card_redeem", WP_PLUGIN_URL.'/plugin-folder/gift_card_redeem.js', array('jquery') );
   wp_localize_script( 'gift_card_redeem', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'gift_card_redeem' );
}
```

Корректное определение действия в JavaScript
Как вы правильно заметили, в вашем первоначальном AJAX-запросе использовалось неверное имя действия. Ранее вы указывали redeem_gift_card, в то время как в функции для обработки вы определили gift_card_redeem. Исправленный код выглядит следующим образом:

jQuery(document).ready(function () {
   jQuery(".redeem_gift_card").click(function (e) {
       e.preventDefault();

       jQuery.ajax({
           type: "post",
           dataType: "json",
           url: myAjax.ajaxurl,
           data: { action: "gift_card_redeem" }, // корректный action
           success: function (response) {
               if (response.type == "success") {
                   jQuery("#test").html(response.type);
               } else {
                   alert("что-то пошло не так");
               }
           },
       });
   });
});

Функция обработки AJAX-запроса
Ваша функция обработки gift_card_redeem также выглядит в целом правильно. Однако для лучшей обработки ситуаций, когда запрос не является AJAX, рекомендуется использовать wp_send_json_error() и wp_send_json_success() для возврата данных:

add_action("wp_ajax_gift_card_redeem", "gift_card_redeem");

function gift_card_redeem(){
   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
       error_log("AJAX запрос обработан");
       $result = array('type' => 'success');
       wp_send_json_success($result);
   } else {
       error_log("Запрос не AJAX, перенаправление");
       wp_send_json_error('Неправильный запрос');
   }
}

Вывод HTML для кнопки
Также в PHP-коде, который выводит HTML, убедитесь, что используете корректный синтаксис, чтобы не было проблем с кодировкой:
```
<?php
   $link = admin_url('admin-ajax.php?action=gift_card_redeem');
   echo '<a class="redeem_gift_card" href="#">Тест</a>'; // убрали href для предотвращения перехода по ссылке
?>
<h1 id="test">Тест</h1>
```

Заключение

Теперь, когда все корректировочные действия выполнены, вы должны избежать ошибки 400 при выполнении вашего AJAX-запроса. Убедитесь, что у вас активен WP_DEBUG для отслеживания ошибок, чтобы упростить диагностику. Удачи в разработке вашего плагина! Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться.