Как в wp работает ajax?

Question

[Александр]

Подскажите пож-ста как в WP работает аякс, хочу сделать подгрузку новостей. Делаю по примерам, но результат получается совсем другой. Проблема в том, что ответ возвращает строкой сначала поля, потом верстку.

Хотя в коде поля заполнены в верстке.

Так ли вообще реализовывается это на WP?

ajax запрос

$.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: '123',
                param1: $type
            },
            beforeSend: function(xhr){

            },
            success: function(data){
                //alert(data);
                $('.list-rooms').remove();
                $('.rooms-section .container').after(data);
            }


        });

код из functions.php

function test_function($js){

  if($_POST['param1'] == 'stud'){
     $summa = "<div class='list-rooms'>";
    $args = array(
                   'publish' => true,
                   'posts_per_page' => 10,
                   'orderby' => 'asc',
                   'cat' => 91,
                  );
            
        query_posts($args);

      if ( have_posts() ){ 
        while ( have_posts() ){
          the_post();
      $summa .= "<div class='vc_col-md-2 vc_col-xs-6 vc_col-sm-3'><a href='".the_field('ссылка_на_квартиру')."' target='_blank' class='element-room-a'><div class='element-room'><img src='".the_field('картинка')."' alt='' /><div class='room-name'>".the_field('тип_квартиры')."</div><div class='room-kv'>общая площадь: <span>".the_field('квадратура')." м<sup>2</sup></span></div><div class='room-price'>".the_field('стоимость')." руб</div><a href='".the_field('ссылка_на_квартиру')."' target='_blank' class='room-buy'>Забронировать</a></div></a></div>";
      }
    }
      wp_reset_query();
      $summa = $summa."</div>";
      //$js->html('.list-rooms', $summa);


    echo wp_json_encode($summa);
  }
}

add_action( 'wp_ajax_123', 'test_function' );
add_action( 'wp_ajax_nopriv_123', 'test_function' );

Answer 1

[Борис Черепанов]

Для начала рекомендую вам мою статью. Там описано как вывести пост в модальном окне. Это немного не то, но поможет разобраться с ajax в wp. Вот ссылка .

Далее. В начале статьи я описываю как работать с WP_query
Вы будите изменять массив агрументов для него, чтобы получить ещё новости по событию.
Примерно вы будете передавать массив

$args = array(
'post_type' => 'post',
'offset'=> '' // отступ, сколько постов пропустить при запросе из базы 
'posts_per_page'=> 10 // количество постов
);

Скорее всего вы просто будите менять offset. Если изначально не указать posts_per_page то количество постов будет такое как в настройках wp

Про js.
Рекомендую вот такую статью для того чтобы понять как на чистом js написать ajax для wordpress

Ну так вот. Чтобы запоминать состояние прокрутки предлагаю вам устанавливать hash адреса
window.location.hash = 2 // страница 2 например

Когда пользователь будет попадать на страницу проверяйте hash и в зависимости от него отдавайте ему нужные записи. (Так можно пользователь будет грузить меньше данных и сможет переходить обратно если перешёл на статью)
А при событии на которое повешена подгрузка записей изменяйте hash и делайте AJAX-запрос

Comments

[Вова Дружаев]

не будИте

[Борис Черепанов]

Владимир Дружаев, спасибо

Answer 2

[Dmitry Bay]

Для начала - ответ сервера должен быть как JSON. гуглите header json.
Во вторых - в функции
echo wp_json_encode($summa);
Вы отдаете строку. А надо массив. В кратком виде это может быть так.

$response = [];
   if ( have_posts() ){ 
        while ( have_posts() ){
          the_post();
      $response['items'][]= 'elemnt';
      }
    }

Либо просто отдавайте строку как есть, без json_encode.