php - Load more posts using AJAX based on posts inside WP_Query

admin管理员组

文章数量:1289496

So this is something that I have been battling with for some time now and I can't figure out how to "Load More" posts using AJAX with a combined query.

Is it possible to AJAX Load more with just the provided IDs? - Also, feel free to scrape the JS completely and show me maybe a better method.

Basically, here is what I'm attempting to do and it's not working at all:

1. Load only 4 posts at a time from the IDs and then on click, load the next 4 posts.
2. Focus on the $main_query variable which has the last WP_Query that completed all the filtering.
3. The $main_args in the last arguments returning the following:
   
4. The main WP_Query is the following:
   

HTML:

<?php
$result = FH_Work::getInstance()->fetch_work_items(get_post());
?>

<div class="work-items-container">
    <?php
    echo $result['content'];
    ?>
</div>

<div class="container-fluid view-more-work cnt-pager <?php echo $result['has_pages'] ? '' : 'd-none' ?>">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="eyebrow medium bold dark content" data-aos="fade-up">
                    <span><?php the_field('cta_view_more_text'); ?></span>
                    <a href="javascript:;" class="btn-fh dark btn-primary small evt-view-more-work-items">
                        <i class="custom-icon icon-icon_small_arrow_right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

PHP:

public function fetch_work_items($expertise = null)
{
    if ($expertise->post_type != 'expertise') {
        $expertise = null;
    }
    $expertise_id = intval(array_key_exists('expertise_id', $_POST) ? $_POST['expertise_id'] : 0);
    $is_ajax = array_key_exists('is_ajax', $_POST) ? $_POST['is_ajax'] : false;
    $paged = intval(array_key_exists('paged', $_POST) ? $_POST['paged'] : 1);
    $args = [
        'post_status' => ['publish'],
        'post_type' => ['work', FH_Report_Type::CPT_NAME],
        'fields' => 'ids',
    ];
    if (!is_null($expertise) || $expertise_id != 0) {
        $args['meta_query'] = [[
            'key' => 'expertise',
            'value' => '"' . (is_null($expertise) ? $expertise_id : $expertise->ID) . '"',
            'compare' => 'LIKE'
        ]];
    }
    $acf_query = [];
    if (get_field('featured_posts')) {
        $acf_post_ids = get_field('featured_posts', false, false);
        $acf_query = get_posts([
            'post_type' => ['work', FH_Report_Type::CPT_NAME],
            'fields' => 'ids',
            'post__in' => $acf_post_ids,
            'orderby' => 'post__in',
        ]);
        $args['post__not_in'] = $acf_post_ids;
    }
    $wp_query = new WP_Query($args);
    $main_ids = array_unique(array_merge($acf_query, $wp_query->posts));
    $main_args = [
        'post_type' => ['work', FH_Report_Type::CPT_NAME],
        'post__in' => $main_ids,
        'orderby' => 'post__in',
        'posts_per_page' => FH_Work::ITEMS_PER_PAGE,
        'paged' => $paged
    ];
    $main_query = new WP_Query($main_args);
    $content = '';
    if ($main_query->have_posts()) {
        ob_start();
        get_template_part('template-parts/blocks/work-expertise-filter/work-items-template', null, ['query' => $main_query]);
        $content = ob_get_contents();
        ob_end_clean();
        wp_reset_postdata();
    }
    $result = ['content' => $content, 'has_pages' => $main_query->max_num_pages > $paged];

    if ($is_ajax) {
        echo json_encode($result);
        wp_die();
    }

    return $result;
}

add_action('wp_ajax_nopriv_fh_paginate_work_items', [self::getInstance(), 'fetch_work_items']);  
add_action('wp_ajax_fh_paginate_work_items', [self::getInstance(), 'fetch_work_items']);

work-items-template.php:

$query = $args['query'];
$invert_tiles = array_key_exists('meta_query', $query->query);
$counter = $invert_tiles ? 1 : 0; // To define if is left or right template
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
    <?php if ($counter % 2 == 0): ?>
        <!-- Image right -->
        <div class="container showcase img-right" data-aos="fade-up">
            <div class="row">
                <div class="col-md-6 img px-0">
                    <div class="imagery-wrap">
                        <img src="<?php echo get_the_post_thumbnail_url() ?>" alt="" class="imagery"/>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
    <?php $counter++ ?>
<?php endwhile; ?>

JavaScript: Here is what I'm attempting to do, but for some reason I am not able to loop through all the IDs.

var WORK_EXPERTISE_MODULE = function ($block) {

    var nextPage = 1;

    function init() {
        $block.find('.evt-view-more-work-items').on('click', paginateWorkItems);
    }

    /**
     * Paginate the work items
     */
    function paginateWorkItems() {
        nextPage++;
        var data = {
            action: 'fh_paginate_work_items',
            is_ajax: true,
            paged: nextPage
        };

        $.ajax({
            type: 'POST',
            url: wp_ajax_url.full_url,
            data: data,
            dataType: 'json',
            success: function (response) {
                if (!response.hasOwnProperty('content') && !response.hasOwnProperty('has_pages')) {
                    return;
                }
                $block.find('.work-items-container').append(response.content);
                if (response.has_pages === false) {
                    $block.find('t-pager').addClass('d-none');
                }
            }
        });
    }

    return {
        init: init
    };
};

$(document).ready(function () {
    $('.evt-init-work-list').each(function (i, ele) {
        (new WORK_EXPERTISE_MODULE($(ele))).init();
    });
});

本文标签： phpLoad more posts using AJAX based on posts inside WPQuery