В ответ с севера приходит один пост при ajax пагинации (показать еще), в чем проблема?

Question

[doctor__23]

Написал код для кнопки "показать еще", но в ответ с севера приходит вместо 2й страницы пагинации просто 2й пост из кастомных постов. Не могу понять в чем проблема.

PHP код в шаблоне:

<?php global $wp_query;

            $args = array(
                'post_type' => 'team',
//                    'orderby' => 'team_order',
                'meta_query' => array(
                    array(
                        'key' => 'team_order',
                        'value' => array(1, 1000),
                        'type' => 'numeric',
                        'compare' => 'BETWEEN'
                    )
                ),
                'order' => 'ASC',
                'posts_per_page' => 6,
                'paged' => 1
            );
            $team = new WP_Query($args);
            ?>

            <?php if ($team->have_posts()) : ?>
                <div class="team__list">

                    <?php while ($team->have_posts()) : $team->the_post();
                        get_template_part('template-parts/content', 'team');

                    endwhile; ?>
                </div>


                <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1;
                $max_pages = $team->max_num_pages;

                if ($paged < $max_pages) : ?>
                    <button
                            class="btn team__btn-more"
                            data-max_pages="<?= $max_pages ?>"
                            data-paged="<?= $paged ?>"
                            data-type="team"
                    >
                        Показать еще
                    </button>
                <?php endif; ?>

                <?php the_posts_navigation(); ?>

            <?php else: ?>

                Здесь пока пусто

            <?php endif; ?>

PHP код в functions.php

add_action( 'wp_enqueue_scripts', 'the_keys_loadmore_scripts' );

function the_keys_loadmore_scripts() {
    global $wp_query;

    wp_register_script(
        'the_keys_loadmore',
        get_stylesheet_directory_uri() . '/assets/the_keys_prod/js/loadmore.js',
        array('the_keys-vendor-js'),
        time()
    );

    wp_localize_script(
        'the_keys_loadmore',
        'the_keys',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'query_vars' => json_encode( $wp_query->query )
        )
    );

    wp_enqueue_script( 'the_keys_loadmore' );
}



add_action( 'wp_ajax_loadmore', 'the_keys_loadmore' );
add_action( 'wp_ajax_nopriv_loadmore', 'the_keys_loadmore' );

function the_keys_loadmore() {

    echo 'получилось';

	$paged = ! empty( get_query_var($_POST[ 'paged' ]) ) ? get_query_var($_POST[ 'paged' ]) : 1;
	$paged++;

//	$args = array(
//        'post_type' => $_POST['type'],
////        'paged' => $paged,
//        'post_status' => 'publish',
////        'post_per_page' => 2
//    );
    $args = array(
//        json_decode( stripslashes( $_POST['query_vars'] ), true ),
//        'post_type' => $_POST['type'],
        'post_type' => 'team',
//        'orderby' => 'team_order',
        'meta_query' => array(
            array(
                'key' => 'team_order',
                'value' => array(1, 1000),
                'type' => 'numeric',
                'compare' => 'BETWEEN'
            )
        ),
        'order' => 'ASC',
        'paged' => $paged,
        'post_status' => 'publish',
//        'post_per_page' => 1000
    );

    dump($args);

    $posts = new WP_Query( $args );

    dump($posts->posts);

    if( ! $posts->have_posts() ) {
        get_template_part( 'content', 'none' );
    }
    else {
        while ( $posts->have_posts() ) {
            $posts->the_post();
            get_template_part( 'template-parts/content',  $_POST['type']);
        }
    }

    die;
}

JavaScript код

$(document).ready(function () {
    // определяем в переменные кнопку, текущую страницу и максимальное кол-во страниц
    var button = $( '.team__btn-more' ),
        paged = button.data( 'paged' ),
        maxPages = button.data( 'max_pages' ),
        type = button.data('type');

    button.on('click', function( event ) {
        var myData = {
            paged : paged, // номер текущей страниц
            action : 'loadmore', // экшен для wp_ajax_ и wp_ajax_nopriv_
            type: type,
            // action: 'loadmore',
            query_vars: the_keys.query_vars,
            // page: paged
        }

        console.log(myData)

        event.preventDefault(); // предотвращаем клик по ссылке

        $.ajax({
            url: the_keys.ajaxurl,
            type: 'post',
            data: myData,
            success: function( result ) {
                paged++;
                console.log( result );
            }
        })
    })
})

Скриншот того, что отдает север (отдает чисто один пост, номер, которого равен параметру 'paged' => $paged).

Comments

[Дмитрий]

get_query_var не так работает

в вашем случае
$paged = ! empty( get_query_var($_POST[ 'paged' ]) ) ? get_query_var($_POST[ 'paged' ]) : 1;
поменять на
$paged = ! empty( $_POST[ 'paged' ] ) ? $_POST[ 'paged' ] : 1;

[doctor__23]

Дмитрий, а так тоже было, результат один и тот, как на скрине.

Answer 1

[doctor__23]

В общем решил вопрос +/- вроде даже понял почему не работало, но
то только теория :D

Фишка в том, что я решил аргументы для WP_Query передать через ajax запрос, и сразу все нормально заработало, приведу свой код ниже:

код в functions.php

function the_keys_loadmore() {
	$paged =  ! empty( $_POST[ 'paged' ] ) ? $_POST[ 'paged' ] : 1;
    $post_type = '';
	$paged++;

    $args = array(
        json_decode( stripslashes( $_POST['query_vars'] ), true ),
    );


    foreach ($_POST['args'] as $key => $value) {
        if ($key === "paged") {
            $args[$key] = $paged;
        } else if ($key === "post_per_page") {
            $args[$key] = "1000";
        } else if ($key === "post_type") {
            $args[$key] = $value;
            $post_type = $value;
        } else {
            $args[$key] = $value;
        }
    }

    $posts = new WP_Query( $args );

    if( ! $posts->have_posts() ) {
        get_template_part( 'content', 'none' );
    }
    else {
        while ( $posts->have_posts() ) {
            $posts->the_post();
            get_template_part( 'template-parts/content',  $post_type);
        }
    }

    die;
}

Пару комментариев в переменной 'args', которую мы получили через $_POST, как раз лежат аргументы для WP_Query, через цикл записываю все занчения в свою переменную $args, которую потом передаю в WP_Query.

PHP код в шаблоне:

global $wp_query;

$args = array(
    'post_type' => 'team',
    'orderby' => 'team_order',
    'meta_query' => array(
        array(
            'key' => 'team_order',
            'value' => array(1, 1000),
            'type' => 'numeric',
            'compare' => 'BETWEEN'
        )
    ),
    'order' => 'ASC',
    'post_status' => 'publish',
    'posts_per_page' => 6,
    'paged' => 1
);
$argsJson = json_encode($args);
$team = new WP_Query($args);

<?php if ($team->have_posts()) : ?>
                <div class="team__list">
                    <?php while ($team->have_posts()) : $team->the_post();
                        get_template_part('template-parts/content', 'team');
                    endwhile; ?>
                </div>

                <?php 
                
                $paged = get_query_var('paged') ? get_query_var('paged') : 1;
                $max_pages = $team->max_num_pages;

                if ($paged < $max_pages) : ?>
                    <button
                            class="btn team__btn-more"
                            data-max_pages="<?= $max_pages ?>"
                            data-paged="<?= $paged ?>"
                            data-args='<?= $argsJson ?>'
                    >
                        Показать еще
                    </button>
                <?php endif; ?>

            <?php else: ?>

                Здесь пока пусто

            <?php endif; ?>

Пару комментариев. Создал переменную $argsJson и передал в нее переменную $args, конвертнув при этом все в JSON. и передал переменную $argsJson в дата параметр на кнопке (важное примечание, если в дата параметр передавать JSON, то обязательно нужно оборачивать в одинарные кавычки, иначе JS не считает, что в этом жата параметре).

И, наконец, JS код

var button = $('.team__btn-more'),
        maxPages = button.data('max_pages'),
        args = button.data('args');

    button.on('click', function (e) {
        e.preventDefault();

        var parentList = $('.team__list'),
            paged = $(this).data('paged');

        var myData = {
            paged: paged, // номер текущей страниц
            action: 'loadmore', // экшен для wp_ajax_ и wp_ajax_nopriv_
            args: args,
            query_vars: the_keys.query_vars,
        }

        $.ajax({
            url: the_keys.ajaxurl,
            type: 'post',
            data: myData,
            beforeSend: function (xhr) {
                button.text('Загружаем...');
                button.addClass('disabled');
            },
            success: function (result) {
                // console.log(result);

                parentList[0].insertAdjacentHTML('beforeend', result);

                paged++;

                if( paged === maxPages ) {
                    button.remove();
                } else {
                    button.text( 'Показать ещё' );
                    button.data('paged', paged);
                    button.removeClass('disabled');
                }
            }
        })
    });

Тут в целом нечего комментировать :)

Надеюсь, что кому-то помогу этим решением :)

Answer 2

[ForZZ12]

Только что так же думал в ручную написать этот код, но нашёл плагин который делает это за 5 минут Ajax Load More. Так же можно настроить кастомный вывод записи по твоему шаблону.

Comments

[doctor__23]

Плагин это хорошо, но не очень хочется плагины плодить:)