I have been trying every which way to make my 'load more' work with ACF fields. I have a complex query that works correctly, but I need a 'load more' added. This is where I am. I can load more, but not with the variables that are required from ACF.
I have a script in my functions.php that runs it, a file that is the block template and a js file to fire the script.
The first set of results are correct, but it loses the values on when you load more as the ACF are missing.
Functions.php
function enqueue_load_more_script() {
global $luna;
wp_enqueue_script(
'load-more-script',
get_stylesheet_directory_uri() . '/js/src/my_loadmore.js',
array('jquery'),
null,
true
);
return wp_localize_script('load-more-script', 'loadmore_params', array(
'post_id' => $post->ID,
'ajaxurl' => admin_url('admin-ajax.php'),
'post_type' => 'consultant', // ← Your custom post type
'consultantcat' => get_field('m53_consultants',$post->ID),
'insurer' => get_field('m53_insurer',$post->ID),
'location' => get_field('m53_location',$post->ID),
));
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_script');
function codebykishor_load_more_posts() {
global $luna;
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$post_type = sanitize_text_field(isset($_POST['post_type']) ? $_POST['post_type'] : '');
$consultantcat = sanitize_text_field(isset($_POST['consultantcat']) ? $_POST['consultantcat'] : '');
if($location == "all"){
$location_val = "NOT LIKE";
}else{
$location_val = "LIKE";
};
if( $insurer) {
$insurerval = $insurer;
}else{
$insurerval = "";
};
$post_args = array(
'post_type' => $post_type,
'posts_per_page' => 6,
'paged' => $paged,
'orderby' => 'title',
'order' => 'ASC',
'treatment-category' => $consultantcat, // <-- category slug
'insurer' => $insurerval // <-- insurer slug
);
$consultant_query = new WP_Query($post_args);
if ($consultant_query->have_posts()) :
while ($consultant_query->have_posts()) : $consultant_query->the_post();
get_template_part(
'template-parts/consultants-post-tile-grid', null,
array(
'linkoption' => $linkon, // passing this array possible since WP 5.5
) );
endwhile;
endif;
wp_die();
}
add_action('wp_ajax_codebykishor_load_more_posts', 'codebykishor_load_more_posts');
add_action('wp_ajax_nopriv_codebykishor_load_more_posts', 'codebykishor_load_more_posts');
Block template - All works correctly
$className = 'consultantsgrid';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
global $luna;
$block_id = ! empty( $block['anchor'] ) ? $block['anchor'] : $block['id'];
$id_post = isset( $_REQUEST['post'] ) ? intval( $_REQUEST['post'] ) : get_the_ID();
$consultantcat = get_field( 'm53_consultants' );
$insurer = get_field( 'm53_insurer' );
$linkon = get_field( 'm53_link_on');
$location = get_field('m53_location');
if($location == "all"){
$location_val = "NOT LIKE";
}else{
$location_val = "LIKE";
};
if( $insurer) {
$insurerval = $insurer;
}else{
$insurerval = "";
};
?>
<div class="archive terra-feed" data-catattribute="<?php echo esc_html( $consultantcat );?>" data-locattribute="<?php echo esc_html( $location );?>">
<div class="archive-container__posts consultantlocationgrid ">
<div id="consultant-feed" class="<?php echo $block_id?> <?php echo esc_attr($className); ?> terra-container archive-container__items archive-container__items--consultant cxc-post-wrapper post-list">
<?php
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$post_args = [
'post_type' => 'consultant',
'posts_per_page' => 6,
'orderby' => 'title',
'order' => 'ASC',
'paged' => $paged,
'treatment-category' => $consultantcat, // <-- category slug
'insurer' => $insurerval, // <-- insurer slug
'meta_query' => [
[
'key' => 'related_locations', // <-- ACF field id
'value' => '"' . $location . '"', // <-- ACF field value
'compare' => $location_val
]
],
];
$consultant_query = new WP_Query( $post_args );
if ($consultant_query->have_posts()) :
while ( $consultant_query->have_posts() ) :
$consultant_query->the_post();
get_template_part(
'template-parts/consultants-post-tile-grid', null,
array(
'linkoption' => $linkon, // passing this array possible since WP 5.5
) );
endwhile;
wp_reset_postdata();
endif;
?>
</div>
<button class="loadmore">Load more</button>
</div>
</div>
Javascript - Fires but wrong results
jQuery(document).ready(function($) {
var page = 1;
$('.loadmore').on('click', function() {
var data = {
'action': 'codebykishor_load_more_posts',
'page': page,
'post_type': loadmore_params.post_type,
'consultantcat': loadmore_params.consultantcat,
'insurer': loadmore_params.insurer,
'linkon': loadmore_params.linkon,
'location': loadmore_params.location
};
$.post(loadmore_params.ajaxurl, data, function(response) {
$('.post-list').append(response);
page++;
});
});
// Optional: Load first page automatically (Method 2 only)
if ($('.post-list').is(':empty')) {
$('.loadmore').click();
}
});