Ajax поиск WordPress

    2 комментария 3878

Ajax search WordPress

Привет. Совсем недавно приходилось переносить существующий проект с самописного движка на WordPress и необходимо было сделать в точности так же вместе с поиском по сайту, который был реализован на Ajax. И если перед вами тоже стоит такая задача, то сейчас расскажу, как я ее решал. Если вы не знали, то поддержка Ajax в WordPress уже есть и его функционал активно используется в админ-панели. Обработчик Ajax запросов находится в файле:

Телеграм-канал serblog.ru

/wp-admin/admin-ajax.php

Но для того, чтобы использовать его для поиска по сайту — нужно написать небольшой хук, чтобы Ajax заработал на фронтенде, а так же создать запрос с помощью встроенного в WP класса WP_Query . Чем мы сейчас и займемся. Конечно реализовать поиск можно при помощи специальных плагинов, но в моем случае гораздо проще написать с самого начала, чем переделывать существующий код. Если в вашей теме нет файла functions.php, то создайте его и пометите этот фрагмент кода:

Обработчик Ajax запросов ы WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
add_action('wp_ajax_send_data' , 'data_query');
add_action('wp_ajax_nopriv_send_data','data_query');
function data_query(){
  $the_query = new WP_Query( array( 'posts_per_page' => 5, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'post' ) );
  if( $the_query->have_posts() ) :
    echo '<ul class="list-group shadow">';
    while( $the_query->have_posts() ): $the_query->the_post(); ?>
	<li class="list-group-item"><a href="<?php echo esc_url( post_permalink() ); ?>">< ?php the_title();?></a></li>
    < ?php endwhile;
    echo '</ul>';
  wp_reset_postdata();
  else:
    echo '</ul><ul class="list-group shadow"><li class="list-group alert-danger p-1"><h4>Товаров не найдено</h4></li></ul>';
  endif;
wp_die();
}

Теперь разберем подробно:

1 Включение Ajax для неавторизованных пользователей
2 Включение Ajax для авторизованных пользователей
3 Начало функции data_query
4 Запрос к БД в переменной $the_query
5 Проверка, есть ли посты
6 Формируем список ul с классами bootstrap
7 Запускаем стандартный WordPress цикл вывода постов
8 Выводим заголовок найденной записи и делаем его ссылкой
9 Конец цикла
10 Закрывающий тег списка
11 Функция сброса данных
12 else
13 Что выводить, если данные не найдены
14 Окончание проверок
15 Останавливаем дальнейшее выполнение функции
16 Закрытие функции

Скрипт Ajax поиска WordPress

Теперь, чтобы у нас все заработало, напишем сам Ajax запрос. Соответственно у вас должна быть подключена библиотека jQuery. Поместить его можно как в файл темы, например в footer, так и через функцию все в том же файле functions.php примерно таким образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
add_action( 'wp_footer', 'ajax_script' );
function ajax_script(){ ?>
  <script type="text/javascript">
    function fetchResults(){
      var keyword = jQuery('#searchInput').val();
      if(keyword == "" || keyword.length < = 3){
      $('#search').html("");
      } else {
	$.ajax({
          url: '<?php echo admin_url('admin-ajax.php'); ?>',
          type: 'post',
          data: { action: 'send_data', keyword: keyword  },
          beforeSend: function (){
	    $('#search').html('<img src="<?php echo get_template_directory_uri() ?/>/img/Preloader.svg">');
	  },
          success: function(data) {
	    $('#search').html( data );
	 }
            });
        }
    }
</script>
< ?php }

И на форму поиска, то есть на сам input вешаем эту функцию:

<input type="text" name="s" onkeyup="fetchResults();" id="searchInput" value="" autocomplete="off"/>

Под формой помещаем блок с id search, в который будет помещен результат поиска. Теперь давайте разберем построчно JavaScript.

3 Объявляем функцию fetchResults
4 Вносим в переменную keyword данные из input
5, 6 Если поле пустое или меньше или равно 3-м символам — оставляем блок с результатами поиска пустым
7 else
8 Начало Ajax запроса
9 Ссылка на обработчик
10 Указываем метод передачи данных
11 Создаем 2 переменных (action и keyword)
12, 13, 14 Выводим gif изображение до загрузки данных
15, 16, 17 Получаем данные и выводим их в блоке #search
18 Закрытие Ajax
19 Закрытие else
20 Конец функции fetchResults

Ajax форма поиска в Wodpress

Напомню, что проект, который я делал сверстан при помощи Bootstrap и его работающая форма выглядит вот так:

1
2
3
4
5
6
7
8
9
10
11
<div class="input-group has-search col-12  col-md-6 text-center">
    <form method="get" action="<?php echo esc_url( home_url() ); ?>" class="col-12">
        <input type="text" class="form-control" name="s" onkeyup="fetchResults();" id="searchInput"
           placeholder="Введите название продукта"
           value="<?php echo get_search_query(); ?/>" autocomplete="off">
        <button type="submit" class="search-image">
        <span class="fa fa-search form-control-feedback"></span>
        </button>
    </form>
    <div class="col-12 p-0" id="search"></div>
</div>

Искренне надеюсь, что вы хорошо освоили данные материал и у вас получилось самостоятельно сделать на сайте WordPress Ajax поиск. Если возникли какие-то вопросы, то смело задавайте их в комментариях.

Любая сумма на развитие сайта

2 комментария
  1. s:

    Куда этот код нужно вставить?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *