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

• bigrat95

• October 12, 2021 at 5:38 pm

Hi,

We have 300 products and every products contains a user manual. I created a field called pdf_upload where I’ve uploaded a pdf file on each individual product. The file can then be previewed on every single page.

Here is my code:

<?php $pdf_upload = get_field('pdf_upload');
    if( $pdf_upload ): ?>
       <a href="<?php echo $pdf_upload['url']; ?>">Manuel PDF</a>
    <?php endif; ?>

Now, I want to create a page and display an ordered list of all uploaded PDF by date uploaded. So far, looking at acf documentation I’ve only been able to get the result of a field on a single product page but not all the results uploaded.

How can I display a list of all the PDF’s that has been uploaded?

• John Huebner

• October 13, 2021 at 3:41 pm

This is correct. There isn’t any way to get all of the values for all of the posts using any function in ACF or WP. To do what you want to do you would have to query the _postmeta table in the DB directly.

https://developer.wordpress.org/reference/classes/wpdb/

edit: in addition to this, this field in the DB only contains the ID value of the media file (upload) and you would need to get the link to this file yourself. https://developer.wordpress.org/reference/functions/wp_get_attachment_url/

• jarvis

• October 14, 2021 at 5:28 am

HI @bigrat95

Could you not just add a loop to your page template, loop through all pages/posts and output the ACF field?

<?php
$args = array(
	'posts_per_page'	=> -1,
	'post_type'			=> 'post',
 	'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 ): ?>
       <a href="<?php echo $pdf_upload['url']; ?>">Manuel PDF</a>
    <?php endif; 

	endwhile;
endif;

• John Huebner

• October 14, 2021 at 9:37 am

@jarvis yes, this could be done. The only issue with it is that with 300 products it will be very slow. But it is a solution.

• jarvis

• October 14, 2021 at 9:44 am

A possible alternative would be to use AJAX and create a load more function as the user scrolls down.

Would be more work but would ease the page load!

A good tutorial can be seen here.

• jarvis

• October 15, 2021 at 4:49 am

@bigrat95

You may need to change the post_type and you will also need to amend the ACF field to the name of the one you set up.

• bigrat95

• October 20, 2021 at 11:45 am

@jarvis It work well, here is the modified code below…

<?php
$args = array(
  'posts_per_page'  => -1,
  '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;

?>

@hube2 The page is indeed pretty slow, I will work on the Ajax now, I will keep this thread updated with the code.

Thanks

• 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

• bigrat95

• October 20, 2021 at 2:43 pm

@jarvis I had to replace $ with jQuery, to solve this error: ‘Uncaught TypeError: $ is not a function ‘

Now, I am getting this error: Uncaught ReferenceError: ajax_posts is not defined

It makes me think that I haven’t proprely enqued the script maybe?

Also do I need to keep the theme twentytwentyone installed ?

• jarvis

• October 20, 2021 at 4:55 pm

Ok, got this working.

In your template:

<?php
$args = array(
  'posts_per_page' 	=> 3, #must match the value in settings > reading > Blog pages show at most
  '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();
the_title();
$pdf_upload = get_field('pdf_upload');
		if( $pdf_upload ): ?>
			<li> <a href="<?php echo $pdf_upload['url']; ?>"><?php the_title; ?></a></li>
		<?php endif; 

	endwhile;
endif; wp_reset_query(); ?>

<?php
#global $wp_query; // you can remove this line if everything works for you
 
// don't display the button if there are not enough posts
if (  $wp_query->max_num_pages > 1 )
	echo '<div class="misha_loadmore">More posts</div>'; // you can use <a> as well
?>

Create a javascript file called myloadmore.js and add the following:

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
	$('.misha_loadmore').click(function(){
 
		var button = $(this),
		    data = {
			'action': 'loadmore',
			'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
			'page' : misha_loadmore_params.current_page
		};
 
		$.ajax({ // you can also use $.post here
			url : misha_loadmore_params.ajaxurl, // AJAX handler
			data : data,
			type : 'POST',
			beforeSend : function ( xhr ) {
				button.text('Loading...'); // change the button text, you can also add a preloader image
			},
			success : function( data ){
				if( data ) { 
					button.text( 'More posts' ).prev().before(data); // insert new posts
					misha_loadmore_params.current_page++;
 
					if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
						button.remove(); // if last page, remove the button
 
					// you can also fire the "post-load" event here if you use a plugin that requires it
					// $( document.body ).trigger( 'post-load' );
				} else {
					button.remove(); // if no data, remove the button as well
				}
			}
		});
	});
});

In your functions file, add the following:

function misha_my_load_more_scripts() {
 
	global $wp_query; 
 
	// In most cases it is already included on the page and this line can be removed
	wp_enqueue_script('jquery');
 
	// register our main script but do not enqueue it yet
	wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery') );
 
	// now the most interesting part
	// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
	// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
	wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
		'max_page' => $wp_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'my_loadmore' );
}
 
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );

Also in your functions file, add the following:

function misha_loadmore_ajax_handler(){
 
	// prepare our arguments for the query
	$args = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
	$args['post_status'] = 'publish';
 
	// it is always better to use WP_Query but not here
	query_posts( $args );
 
	if( have_posts() ) :
 
		// run the loop
		while( have_posts() ): the_post();
	
		$pdf_upload = get_field('pdf_upload');
		if( $pdf_upload ): ?>
			<li> <a href="<?php echo $pdf_upload['url']; ?>"><?php the_title(); ?></a></li>
		<?php endif; 
	
		endwhile;
 
	endif;
	die; // here we exit the script and even no wp_reset_query() required!
}
 
 
 
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

Tried and tested!

• bigrat95

• November 8, 2021 at 11:35 am

It dosen’t seems to be working. It now show 3 links in <li>

There is also a list of products name listed at the bottom of the page

Just to let you know I did match the value in settings – reading- blog which is 12 for me 🙂

• bigrat95

• November 8, 2021 at 2:47 pm

@hube2 @jarvis Forget about my last message. I was able to solve my issue without using ajax.

Since I have around 1200 products on my site, I just added ‘meta_key’ => ‘pdf_upload’, in the array to filter. It reduced the loading time, now the page load fast!

Thanks for your help

Revised code:

<section class="post-content">
                <ul>

                <?php
                $args = array(
                  'posts_per_page' => -1,
                  'post_type' => 'product',
                  'orderby' => 'date',
                  'order' => 'DESC',
                  'paged' => $paged,
                  
                  'meta_key'    => 'pdf_upload',  
                );
                $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']; ?>"><?php 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;
                ?>

                </ul>
              </section>