Reply To: Upload PDF Manuals on all product pages and display all the uploaded value

• jarvis

• October 20, 2021 at 12:06 pm

Something like the below:

<div id="ajax-posts">
<?php
$postsPerPage = 10;	
$args = array(
  'posts_per_page' 	=> $postsPerPage,
  'post_type'		=> 'product',
  'orderby'			=> 'date',
  'order'			=> 'DESC',  
  'paged'			=> $paged,
  'fields'			=> 'ids'      
);
$wp_query = new WP_Query($args);
if ($wp_query->have_posts()) :
	while ($wp_query->have_posts()) : $wp_query->the_post();

		$pdf_upload = get_field('pdf_upload');
		if( $pdf_upload ): ?>
			<li> <a href="<?php echo $pdf_upload['url']; ?>"><? echo $product->post->post_title; ?></a></li>
			<?php echo '<span class="date_published">Published on: ' . get_the_date('Y', $product->get_id()) . '</span>'; ?>
		<?php endif; 

	endwhile;
endif; ?>
</div><!-- /ajax-posts -->
<div id="more_posts">Load More</div>

In your functions file:

<?php
wp_localize_script( 'twentytwentyone-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'twentytwentyone'),
));

function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 10;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    $args = array(
        'post_type'			=> 'product',
        'posts_per_page'	=> $ppp,
        'paged'				=> $page,
    );

	$wp_query = new WP_Query($args);
	if ($wp_query->have_posts()) :
		$out = '';
		while ($wp_query->have_posts()) : $wp_query->the_post();

			$pdf_upload = get_field('pdf_upload');
			if( $pdf_upload ): 
				$out .= '<li><a href="'.$pdf_upload['url'].'">'.$product->post->post_title.'</a></li>';
				$out .= '<span class="date_published">Published on: ' . get_the_date('Y', $product->get_id()) . '</span>';
			endif; 

		endwhile;
	endif;
	
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
?>

Ajax call (perhaps in the footer for testing):

<script>
var ppp = 10; // Post per page
var pageNumber = 1;

function load_posts(){
    pageNumber++;
    var str = '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "product",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}
	
$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});
	
// Or for 'infinite load' instead on click event on the button (just make it invisible, with visibility: hidden;) 

$(window).on('scroll', function(){
	if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
		if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
			load_posts();
        }
	}
});
</script>

Was based on this stack overflow post may help as a reference point